1 Lecture 2 Web Technologies Part 1. 2 l HTML l XHTML l CSS l XML l JavaScript l VBSCRIPT l DOM l...

1

Lecture 2

Web TechnologiesPart 1

2

HTML XHTML CSS XML JavaScript VBSCRIPT DOM DHTML AJAX E4X WMLScript

Web Technologies

SQL ASP ADO PHP .NET SMIL SVG FLASH Java applets Java servlets Java Server Page

3

HTML

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

4

HTML

<html>

<head>

<title> Title of page </title>

</head>

<body>

This is my first homepage.

<b> This text is bold </b>

</body>

</html>

5

HTML Versions

The history of HTML at W3C starts with HTML 3.2.

New versions were followed a few years later by HTML 4.0, then HTML 4.01.

HTML 4.01 is the last version of HTML, and is also the final W3C specification to define the semantics of markup.

6

What Is XHTML?

XHTML stands for EXtensible HyperText 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 W3C Recommendation.

7

XHTML

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.

8

Why XHTML?

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 hand helds.

Mobile phones and hand 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.

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

9

Advantages of XHTML

XHTML is easier to maintain. XHTML is XSL ready. XHTML is easier to teach and to learn. XHTML is ready for the future.

10

XHTML is easier to maintain

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.

11

XHTML is XSL ready

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 W3C to manipulate and transform XML documents: the Extensible Style sheet Language Transformations (XSLT).

12

XHTML is easier to teach and to learn

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.

13

XHTML is ready for the future

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.

14

What is CSS?

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

15

CSS Versions

The World Wide Web Consortium (http://www.w3.org/) has published two main CSS recommendations of style sheets - CSS1 and CSS2.

CSS1 became a recommendation in 1996.

CSS2 became a recommendation in 1998.

16

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}

17

CSS

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.

18

Internal style sheet

<head>

<style type="text/css">h1 {color: red}h3 {color: blue}

</style>

</head>

19

In-line Style Sheet

<html><body>

<a href="lastpage.htm" style="text-decoration:none">THIS IS A LINK!

</a>

</body></html>

20

External Style Sheet

Myhtml.html…<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>….Mystyle.csshr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

21

CSS, Why ?

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 H1 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 PseudoClass cuts down on the need to use JavaScript onmouseover calls.

If you want valid XHTML Strict you have to use it anyway.

22

What is XML?

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 W3C Recommendation.

23

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.

24

XML

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

25

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>

26

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>

27


<html><head>

<script type="text/javascript“ for="window" event="onload">

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("xml_note.xml")

nodes=xmlDoc.documentElement.childNodesto.innerText= nodes.item(0).textfrom.innerText= nodes.item(1).textheader.innerText=nodes.item(2).textbody.innerText= nodes.item(3).text

</script><title>HTML using XML data</title>

</head>

28


<body bgcolor="yellow">

<h1>W3Schools.com Internal Note</h1>

<b>To: </b><span id="to"> </span> <br /><b>From: </b><span id="from"></span><hr><b><span id="header"></span></b><hr><span id="body"></span>

</body></html>

29


To: ToveFrom: Jani

Reminder

Don't forget me this weekend!

Output:

30

Browser Scripting

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.

31

What is JavaScript?

JavaScript was designed to add interactivity to HTML pages.

JavaScript is a scripting language.

A JavaScript consists of lines of executable computer code. A JavaScript is usually embedded directly into HTML pages.

JavaScript is an interpreted language (means that scripts execute without preliminary compilation).

Everyone can use JavaScript without purchasing a license.

32

JavaScript

Are Java and JavaScript the Same?

NO!

Java and JavaScript 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++.

33

What can a JavaScript Do?

JavaScript gives HTML designers a programming tool.

JavaScript can put dynamic text into an HTML page.

JavaScript can react to event. JavaScript can read and write HTML elements. JavaScript can be used to validate data. JavaScript can be used to detect the visitor's

browser. JavaScript can be used to create cookies.

34

How to Put a JavaScript Into an HTML Page

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

35

Where to Put the JavaScript

Head section

Body section

External scripts

36

JavaScript 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>

37

Scripts in the body section

<html>

<head>

</head>

<body>


document.write("Hello World!")

</script>

</body>

38

Using External JavaScript

<html>

<head>

<script src="xxx.js">

</script>

</head>

<body>

</body>

</html>

39


<html><body> <script type="text/javascript"> var d = new Date() var time = d.getHours()

if (time < 10) { document.write("<b>Good morning</b>") } else { document.write("<b>Good day</b>") } </script>

…

40


<html><body>

<script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("The number is " + i) document.write("<br />") }</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>

41

What is VBScript?

VBScript is a Microsoft scripting language.

A scripting language is a lightweight programming language.

VBScript is a light version of Microsoft's

programming language Visual Basic.

42

How Does it Work?

When a VBScript is inserted into a HTML document, the Internet browser will read the HTML and interpret the VBScript.

The VBScript can be executed immediately,

or at a later event.

43

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>

44

Where to Put the VBScript

<html>

<head>

<script type="text/vbscript">

some statements

</script>

</head>

<body>

<script type="text/vbscript">

some statements

</script>

</body>

45

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 ifend function

</script>

</head><body onload="greeting()"></body></html>

46

VBScript (Example)

<html><body>

<script type="text/vbscript">for i = 0 to 5

document.write("The number is " & i & "<br />")

next</script>

</body></html>

47

What is the DOM?

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.

48

What is the DOM?

With JavaScript 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 JavaScript to read and change HTML, XHTML, and XML documents.

49

Document Tree (Node Tree)

<html> <head> <title> My title </title> </head> <body> <h1> My header </h1> <a href=“http://.... > My link

</a> </body> </html>

50

Document Tree (Node Tree)

51

HTML DOM Example

<html>

<head>


function ChangeColor() { document.body.bgColor="yellow" }

</script>

</head>

<body onclick="ChangeColor()">

Click on this document!

</body>

</html>

52

HTML DOM Access Nodes

The getElementById() method returns the element with the specified ID:

document.getElementById("someID");

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

53

HTML DOM Access Nodes

The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name.

document.getElementsByTagName("p");

var x=document.getElementsByTagName("p");

for (var i=0;i<x.length;i++)

{ // do something with each paragraph }

54

JavaScript Objects

Window: The top level object in the JavaScript hierarchy. The Window object represents a browser window. A Window object is created automatically with every instance of a <body> or <frameset> tag

Navigator: Contains information about the client's browser

Screen: Contains information about the client's display screen

History: Contains the visited URLs in the browser window

Location: Contains information about the current URL

55

DOM Objects

DOM Anchor DOM Area DOM Base DOM BodyDOM Button DOM EventDOM Form DOM FrameDOM Frameset DOM IFrameDOM Image DOM Input ButtonDOM Input Checkbox DOM Input FileDOM Input Hidden DOM Input PasswordDOM Input Radio DOM Input ResetDOM Input Submit DOM Input Text DOM Link DOM MetaDOM Object DOM Option DOM Select DOM StyleDOM Table DOM TableCellDOM TableRow DOM Textarea

56

Window Example

<html>

<body>

<script type="text/javascript"> window.status="Some text in the status bar!!"

</script>

</body>

</html>

57

Window Example

<html>

<body>

<script type="text/javascript">myWindow=window.open('','','width=200, height=100')

myWindow.document.write("This is 'myWindow'")

myWindow.focus()

</script>

</body>

</html>

58

Browser Example

<html>

<body>


document.write("<p>Name: ")

document.write(navigator.appName + "</p>")

</script>

</body>

</html>

59

Screen Example

<html>

<body>


document.write("<p>Width: ")

document.write(screen.width + "</p>")

</script>

</body>

</html>

60

<html> <head> <script type="text/javascript"> function changeLink() { document.getElementById('myAnchor').innerHTML="W3Schools"; document.getElementById('myAnchor').href="http://www.w3schools.com"; document.getElementById('myAnchor').target="_blank"; } </script> </head>

<body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a> <input type="button" onclick="changeLink()" value="Change link"> </body></html>

Anchor Example

61

Table Example

<head><script type="text/javascript">

function changevalue() {var x=document.getElementById('mytable').cells

x[0].innerHTML=“Ali" x[1].innerHTML=“Veli" x[2].innerHTML=“Selami" }</script></head>

<body><table id="mytable" border=1> <tr> <td id="col1"> John </td> <td id="col2"> Doe </td> <td id="col3"> Alaska </td> </tr> </table><input type="button" value="Change value" onclick="changevalue()">……

62

What is DHTML?

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 JavaScript)

DHTML is not a standard defined by W3C. DHTML is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support.

63

DHTML Technologies

HTML 4.0 Cascading Style Sheets (CSS) The Document Object Model (DOM) JavaScript

64

DHTML CSS Positioning

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

65

DHTML CSS Positioning

<div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>

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

66

DHTML Document Object Model

Remember DOM from previous slides

<html>

<body>

<h1 id="header">My header </h1> <script type="text/javascript"> document.getElementById('header').style. color="red"

</script>

</body>

</html>

67

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.getElementById('header').style.color="red" }

</script> </head> <body> <h1 id="header" onclick="changecolor()"> Click on this

text</h1> </body> </html>

68

HTML 4.0 Event HandlersEvent 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

onloada 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

69

What is AJAX?

AJAX stands for Asynchronous JavaScript 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:• JavaScript • XML • HTML • CSS

70

What is AJAX?

Ajax is a way of developing Web applications that combines:

XHTML and CSS standards based presentation. Interaction with the page through the DOM. Data interchange with XML and XSLT. Asynchronous data retrieval with

XMLHttpRequest. JavaScript to tie it all together.

71

AJAX = Asynchronous JavaScript and XML

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript 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.

72

AJAX Uses HTTP Requests

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 JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest 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 not notice that scripts request pages, or send data to a server in the background.

73

The XMLHttpRequest Object

By using the XMLHttpRequest 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.

74

AJAX Browser Support

Different browsers use different methods to create the XMLHttpRequest object.

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

75

The XMLHttpRequest Object

The onreadystatechange Property: stores the function that will process the response from a server.

The readyState Property: The readyState property holds the status of the server's response.

The responseText Property: The data sent back from the server can be retrieved with the responseText property.

76

AJAX Example

<html><body>


function ajaxFunction() {var xmlHttp; try {

// Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest();} catch (e) {

// Internet Explorer try { xmlHttp=new

activeXObject("Msxml2.XMLHTTP");} catch (e)

77

AJAX Example

{try {

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e) {

alert("Your browser does not support AJAX!");return false;}

}} xmlHttp.onreadystatechange=function()

{ if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }

xmlHttp.open("GET","time.asp",true);xmlHttp.send(null);}</script>

78

AJAX Example

<form name="myForm"> Name: <input type="text"

onkeyup="ajaxFunction();“ name="username" />

Time: <input type="text" name="time" /></form></body> </html>

79

What is E4X?

E4X is a new extension to JavaScript.

E4X adds direct support for XML to JavaScript.

E4X is an official JavaScript standard.

80

What is E4X?

JavaScript = ECMAScript. ECMAScript is the official name for

JavaScript. ECMAScript is the same as JavaScript. ECMA (The European Computer

Manufacturers Association) is the organization standardizing JavaScript.

E4X = JavaScript for XML.

81

XML As a JavaScript Object

With E4X, 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()

82

E4X 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>

83

E4X 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>

84

E4X Example

For the XML example above, the JavaScript statement:

document.write(x.from)

will produce the output:

Jani

Quite simple. Don't you think?

85

Example without E4X

var xmlDoc//code for Internet Explorerif (window.ActiveXObject){xmlDoc = new ActiveXObject("Microsoft.XMLDOM")xmlDoc.async=false;xmlDoc.load("note.xml")displaymessage()}// code for Mozilla, Firefox, etc.else (document.implementation && document.implementation.createDocument){xmlDoc= document.implementation.createDocument("","",null)xmlDoc.load("note.xml");xmlDoc.onload=displaymessage}

function displaymessage(){document.write(xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue)}

86

Example with E4X

var xmlDoc=new XML()

xmlDoc.load("note.xml")

document.write(xmlDoc.body)

87

Limited Browser Support for E4X

None of the mainstream browsers are currently supporting E4X.

A beta version of the Mozilla engine (1.8) has limited support for E4X. The first browser to support E4X is expected to be Firefox 1.1.

Support for E4X is also expected in a later version of Internet Explorer.

88

What is WML?

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).

89

What is WML?

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.

90

What is WML?

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD

WML 1.1//EN" "http://www.phone.com/dtd/wml11.dtd" >

<wml> <card id="main" title="First Card"> <p mode="wrap">This is a sample

WML page.</p> </card> </wml>

91

What is WMLScript?

WMLScript is the scripting language used in WML pages.

WMLScript is a light version of the JavaScript language.

WML scripts are not embedded in the WML pages. 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.

92

What is WMLScript used for?

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.

93

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="no1" title="Go to URL"> <do type="options" label="Go"> <go href="check.wmls#go_url('W3Schools')"/> </do> </card> </wml>

94

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=="W3Schools") { WMLBrowser.go

("http://www.w3schools.com/wap.wml")

}

}

95

End of Lecture 2

1 Lecture 2 Web Technologies Part 1. 2 l HTML l XHTML l CSS l XML l JavaScript l VBSCRIPT l DOM l...

Documents

Transcript of 1 Lecture 2 Web Technologies Part 1. 2 l HTML l XHTML l CSS l XML l JavaScript l VBSCRIPT l DOM l...