Professional Documents
Culture Documents
Lecture 2 Web Technology Part-1
Lecture 2 Web Technology Part-1
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
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
5
What Is XHTML?
6
XHTML
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
9
XHTML is easier to maintain
10
XHTML is XSL ready
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
13
What is CSS?
15
CSS
Syntax
The CSS syntax is made up of three parts:
a selector, a property and a value:
selector {property: value}
16
CSS
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?
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)
26
HTML-XML Example (2)
<html>
<head>
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
HTML-XML Example (3)
<body bgcolor="yellow">
<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
HTML-XML Example (4)
Output:
To: Tove
From: Jani
Reminder
Don't forget me this weekend!
29
Browser Scripting
30
What is JavaScript?
JavaScript was designed to add interactivity to HTML pages.
31
JavaScript
NO!
32
What can a JavaScript Do?
34
Where to Put the JavaScript
Head section
Body section
External scripts
35
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>
36
Scripts in the body section
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
37
Using External JavaScript
<html>
<head>
<script src="xxx.js">
</script>
</head>
<body>
</body>
</html>
38
What can a JavaScript Do?
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
… 39
What can a JavaScript Do?
<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>
40
What is VBScript?
41
How Does it Work?
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 & "<br />")
next
</script>
</body>
</html>
46
What is the DOM?
47
What is the DOM?
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>
<script type="text/javascript">
function ChangeColor() {
document.body.bgColor="yellow" }
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
51
HTML DOM Access Nodes
document.getElementById("someID");
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
52
HTML DOM Access Nodes
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
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>
<script type="text/javascript">
window.status="Some text in the
status bar!!"
</script>
</body>
</html>
56
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>
57
Browser Example
<html>
<body>
<script type="text/javascript">
document.write("<p>Name: ")
document.write(navigator.appName + "</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 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>
<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()">
…… 61
What is DHTML?
62
DHTML Technologies
HTML 4.0
Cascading Style Sheets (CSS)
The Document Object Model (DOM)
JavaScript
63
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>
<script type="text/javascript">
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>
<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>
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?
69
What is AJAX?
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.
73
AJAX Browser Support
74
The XMLHttpRequest Object
75
AJAX Example
<html>
<body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
// 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?
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
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
83
E4X Example
document.write(x.from)
Jani
85
Example with E4X
86
Limited Browser Support for E4X
87
What is WML?
88
What is WML?
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?
91
What is WMLScript used for?
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:
94
End of Lecture 2
95