Lecture 2 Web Technology Part-1

Lecture 2
Web Technologies
Part 1
1
Web Technologies
 HTML  SQL
 XHTML  ASP
 CSS  ADO
 XML  PHP
 JavaScript  .NET
 VBSCRIPT  SMIL
 DOM  SVG
 DHTML  FLASH
 AJAX  Java applets
 E4X  Java servlets
 WMLScript  Java Server Page
2
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
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
 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.
5
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.
6
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.
7
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
8
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.
9
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.
10
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).
11
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.
12
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.
13
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
14
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.
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
 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">
h1 {color: red}
h3 {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.html
…
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
….
Mystyle.css
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")} 20
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. 21
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.
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>
<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.childNodes
to.innerText= nodes.item(0).text
from.innerText= nodes.item(1).text
header.innerText=nodes.item(2).text
body.innerText= nodes.item(3).text
</script>
<title>HTML using XML data</title>
</head> 27
<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> 28
Output:
To: Tove
From: Jani
Reminder
Don't forget me this weekend!
29
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.
30
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.
31
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++.
32
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. 33
How to Put a JavaScript Into an
HTML Page
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
34
Where to Put the JavaScript
 Head section
 Body section
 External scripts
35
JavaScript in the head section
<html>
<head>
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>
document.write("Hello World!")
</script>
</body>
37
Using External JavaScript
<html>
<head>
<script src="xxx.js">
</script>
</head>
<body>
</body>
</html>
38
<html>
<body>
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>
… 39
<html>
<body>
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>
40
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.
41
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.
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>
some statements
</script>
</head>
<body>
some statements
</script>
</body>
44
VBScript (Example)
html>
<head>
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>
for i = 0 to 5
document.write("The number is " & i & "<br />")
next
</script>
</body>
</html>
46
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.
47
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.
48
Document Tree (Node Tree)
<html>
<head>
<title> My title </title>
</head>
<body>
<h1> My header </h1>
<a href=“http://.... > My link
</a>
</body>
</html>
49
Document Tree (Node Tree)
50
HTML DOM Example
<html>
<head>
function ChangeColor() {
document.body.bgColor="yellow" }
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
51
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);
52
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 }
53
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
54
DOM Objects
 DOM Anchor DOM Area
DOM Base DOM Body
DOM Button DOM Event
DOM Form DOM Frame
DOM Frameset DOM IFrame
DOM Image DOM Input Button
DOM Input Checkbox DOM Input File
DOM Input Hidden DOM Input Password
DOM Input Radio DOM Input Reset
DOM Input Submit DOM Input Text
DOM Link DOM Meta
DOM Object DOM Option
DOM Select DOM Style
DOM Table DOM TableCell
DOM TableRow DOM Textarea
55
Window Example
<html>
<body>
window.status="Some text in the
status bar!!"
</script>
</body>
</html>
56
Window Example
<html>
<body>
myWindow=window.open('','','width=200, height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>
</body>
</html>
57
Browser Example
<html>
<body>
document.write("<p>Name: ")
document.write(navigator.appName + "</p>")
</script>
</body>
</html>
58
Screen Example
<html>
<body>
document.write("<p>Width: ")
document.write(screen.width + "</p>")
</script>
</body>
</html>
59
Anchor Example
<html>
<head>
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>
60
Table Example
<head>
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()">
…… 61
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.
62
DHTML Technologies
 HTML 4.0
 Cascading Style Sheets (CSS)
 The Document Object Model (DOM)
 JavaScript
63
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
64
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>
65
DHTML Document Object Model
 Remember DOM from previous slides
<html>
<body>
<h1 id="header">My header </h1>
document.getElementById('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>
function changecolor() {
document.getElementById('header').style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()"> Click on this
text</h1>
</body>
</html>
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
a page is finished loading. Note: In Netscape this event occurs during the loading of a
onload
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
68
onunload a user closes a page
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
69
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.
70
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.
71
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.
72
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.
73
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.
74
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.
75
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)
76
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> 77
AJAX Example
<form name="myForm">
Name:
<input type="text"
onkeyup="ajaxFunction();“
name="username" />
Time:
<input type="text" name="time" />
</form>
</body>
</html>
78
What is E4X?
 E4X is a new extension to JavaScript.
 E4X adds direct support for XML to JavaScript.
 E4X is an official JavaScript standard.
79
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.
80
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()
81
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>
82
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>
83
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?

84
Example without E4X
var xmlDoc
//code for Internet Explorer
if (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].firstChi
ld.nodeValue)
}
85
Example with E4X
var xmlDoc=new XML()

xmlDoc.load("note.xml")
document.write(xmlDoc.body)
86
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.
87
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).
88
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.
89
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>
90
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.
91
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.
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="no1" title="Go to URL">
<do type="options" label="Go">
<go href="check.wmls#go_url('W3Schools')"/>
</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=="W3Schools") {
WMLBrowser.go
("http://www.w3schools.com/wap.wml")
}
}
94
End of Lecture 2
95

Lecture 2 Web Technology Part-1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 2 Web Technology Part-1

Uploaded by

Copyright:

Available Formats

Lecture 2

 HTML stands for Hyper Text Markup Language

 The history of HTML at W3C starts with

 XHTML stands for EXtensible HyperText

 XHTML 1.0 was created shortly after HTML 4.01 to

 XHTML is easier to maintain.

 XHTML elements must be properly nested.

 XHTML 1.0 is the reformulation of HTML

 When the new version of XHTML becomes a

 CSS stands for Cascading Style Sheets.

 The World Wide Web Consortium

 CSS1 became a recommendation in 1996.

 CSS2 became a recommendation in 1998.

body {bgcolor: black}

 Internal style sheet, included within the head

 XML stands for EXtensible Markup Language.

• HTML was designed to display data and to focus on how

• Best description of XML is this: XML is a

XML document : (file name: “xml_note.xml”)

<?xml version="1.0" encoding="ISO-8859-1" ?>

<script type="text/javascript“ for="window"

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")

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

 Browser scripting languages allow dynamic

 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

 Everyone can use JavaScript without purchasing a license.

 Are Java and JavaScript the Same?

 Java and JavaScript are two completely different

 Java (developed by Sun Microsystems) is a

 JavaScript gives HTML designers a

if (time < 10)

 VBScript is a Microsoft scripting language.

 A scripting language is a lightweight

 VBScript is a light version of Microsoft's

 When a VBScript is inserted into a HTML

 The VBScript can be executed immediately,

 The HTML Document Object Model (HTML

 The DOM presents an HTML document as a

 With JavaScript you can restructure an entire HTML

The getElementById() method returns the

 The getElementsByTagName() method

 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

 DHTML stands for Dynamic HTML.

 First, the element must specify the position

 AJAX stands for Asynchronous JavaScript and XML.

Ajax is a way of developing Web applications that

 AJAX uses asynchronous data transfer (HTTP

 The AJAX technique makes Internet applications

 In traditional web applications, the user will have to

 By using the XMLHttpRequest object, a web

 AJAX was made popular in 2005 by Google

 Try out Google Maps for a few seconds.

 Different browsers use different methods to

 Internet Explorer uses an ActiveXObject,

 The onreadystatechange Property: stores

// Firefox, Opera 8.0+, Safari

 E4X is a new extension to JavaScript.