1 / 95

Lecture 2 Web Technologies Part 1

Lecture 2 Web Technologies Part 1. Web Technologies. HTML XHTML CSS XML JavaScript 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 H yper T ext M arkup L anguage

bartow
Download Presentation

Lecture 2 Web Technologies Part 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 2Web TechnologiesPart 1

  2. Web Technologies • HTML • XHTML • CSS • XML • JavaScript • VBSCRIPT • DOM • DHTML • AJAX • E4X • WMLScript • 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. ExternalStyle 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")}

  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 thisweekend!</body> </note>

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

  28. 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> <hr> <span id="body"></span> </body> </html>

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

  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 withthe onload event") } </script> </head> <body onload="message()"> </body> </html>

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

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

  39. What can a JavaScript Do? <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. 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>

  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 if end 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)

More Related