Lecture 2 Web Technologies Part 1

Lecture 2 Web Technologies Part 1

Web Technologies HTML SQL XHTML ASP CSS ADO XML PHP JavaScript .NET
VBSCRIPT DOM DHTML AJAX E4X WMLScript SQL ASP ADO PHP .NET SMIL SVG FLASH Java applets Java servlets Java Server Page

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

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

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.

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.

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.

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

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.

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.

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

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.

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.

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

CSS Versions The World Wide Web Consortium ( has published two main CSS recommendations of style sheets - CSS1 and CSS2. CSS1 became a recommendation in 1996. CSS2 became a recommendation in 1998.

a selector, a property and a value: selector {property: value}
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}

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.

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

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

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")}

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.

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.

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.

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

An example of an XML document
<?xml version="1.0" encoding="ISO "?> <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> <price>29.99</price> ……………. </bookstore>

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

HTML-XML Example (2) <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>

HTML-XML Example (3) <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> <span id="body"></span> </body> </html>

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

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.

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.

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

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.

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

Where to Put the JavaScript
Head section Body section External scripts

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>

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

Using External JavaScript
<html> <head> <script src="xxx.js"> </script> </head> <body> </body> </html>

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

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

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.

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.

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

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

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>

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

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.

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.

Document Tree (Node Tree)
<html> <head> <title> My title </title> </head> <body> <h1> My header </h1> <a href=“ > My link </a> </body> </html>

Document Tree (Node Tree)

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>

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

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 }

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

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

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

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>

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

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

Anchor Example <html> <head>
<script type="text/javascript"> function changeLink() { document.getElementById('myAnchor').innerHTML="W3Schools"; document.getElementById('myAnchor').href=" document.getElementById('myAnchor').target="_blank"; } </script> </head> <body> <a id="myAnchor" href=" <input type="button" onclick="changeLink()" value="Change link"> </body> </html>

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()"> ……

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.

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

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

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

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>

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>

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

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

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.

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.

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.

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.

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.

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.

AJAX Example <html> <body>
<script type="text/javascript"> 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)

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>

AJAX Example <form name="myForm"> Name:
<input type="text" onkeyup="ajaxFunction();“ name="username" /> Time: <input type="text" name="time" /> </form> </body> </html>

What is E4X? E4X is a new extension to JavaScript.
E4X adds direct support for XML to JavaScript. E4X is an official JavaScript standard.

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.

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

E4X Example <note>
<date> </date> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body> Don't forget me this weekend! </body> </note>

E4X Example var x = new XML() x= <note>
<date> </date> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>

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?

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].firstChild.nodeValue) }

Example with E4X var xmlDoc=new XML() xmlDoc.load("note.xml")
document.write(xmlDoc.body)

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.

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

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.

What is WML? <?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN" " > <wml> <card id="main" title="First Card"> <p mode="wrap">This is a sample WML page.</p> </card> </wml>

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.

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.

How to call a WMLScript from a WML page (1)
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" " <wml> <card id="no1" title="Go to URL"> <do type="options" label="Go"> <go href="check.wmls#go_url('W3Schools')"/> </do> </card> </wml>

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 (" }

End of Lecture 2

Lecture 2 Web Technologies Part 1

Similar presentations

Presentation on theme: "Lecture 2 Web Technologies Part 1"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Lecture 2 Web Technologies Part 1

Similar presentations

Presentation on theme: "Lecture 2 Web Technologies Part 1"— Presentation transcript:

Similar presentations

About project

Feedback