XHTML What Is XHTML XHTML stands for EXtensible
XHTML
What Is XHTML? • XHTML stands for EXtensible Hyper. Text Markup Language • XHTML is almost identical to HTML • XHTML is stricter than HTML • XHTML is HTML defined as an XML application • XHTML is supported by all major browsers
Why XHTML? • This HTML code works fine in most browsers (even if it does not follow the HTML rules): • <html> <head> <title>This is bad HTML</title> <body> <h 1>Bad HTML <p>This is a paragraph </body>
• XML is a markup language where documents must be marked up correctly (be "wellformed"). • By combining the strengths of HTML and XML, XHTML was developed. • XHTML is HTML redesigned as XML.
The Most Important Differences from HTML: • • Document Structure XHTML DOCTYPE is mandatory The xmlns attribute in <html> is mandatory <html>, <head>, <title>, and <body> are mandatory
XHTML Elements • XHTML elements must be properly nested – In HTML, some elements can be improperly nested within each other, like this: – <b><i>This text is bold and italic</b></i> – In XHTML, all elements must be properly nested within each other, like this: – <b><i>This text is bold and italic</i></b> • XHTML elements must always be closed • This is wrong: – <p>This is a paragraph <p>This is another paragraph • This is correct: – <p>This is a paragraph</p> <p>This is another paragraph</p> • XHTML documents must have one root element
• XHTML elements must be in lowercase – This is wrong: • <BODY> <P>This is a paragraph</P> </BODY> – This is correct: • <body> <p>This is a paragraph</p> </body>
• • XHTML Attributes Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden
• XHTML Attribute Names Must Be In Lower Case – This is wrong: • <table WIDTH="100%"> – This is correct: • <table width="100%"> • Attribute Values Must Be Quoted – This is wrong: • <table width=100%> – This is correct: • <table width="100%">
• Attribute Minimization Is Forbidden – Wrong: • <input type="checkbox" name="vehicle" value="car" checked /> – Correct: • <input type="checkbox" name="vehicle" value="car" checked="checked" /> – Wrong: • <input type="text" name="lastname" disabled /> – Correct: • <input type="text" name="lastname" disabled="disabled" />
How to Convert from HTML to XHTML • Add an XHTML <!DOCTYPE> to the first line of every page • Add an xmlns attribute to the html element of every page • Change all element names to lowercase • Close all empty elements • Change all attribute names to lowercase • Quote all attribute values
• An XHTML document must have an XHTML DOCTYPE declaration. • A complete list of all the XHTML Doctypes is found in our HTML Tags Reference. • The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document. • This example shows an XHTML document with a minimum of required tags:
• <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> some content </body> </html>
• HTML 5. 0
• The DOCTYPE declaration for HTML 5 is very simple: – <!DOCTYPE html> • The character encoding (charset) declaration is also very simple: – <meta charset="UTF-8"> • HTML 5 Example: • <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document. . . </body>
• The most interesting new elements are: • New semantic elements like <header>, <footer>, <article>, and <section>. • New form control attributes like number, date, time, calendar, and range. • New graphic elements: <svg> and <canvas>. • New multimedia elements: <audio> and <video>.
• The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually Java. Script). • The <canvas> element is only a container for graphics. • You must use a script to actually draw the graphics. • Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
• • • What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W 3 C recommendation SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Differences Between SVG and Canvas • SVG is a language for describing 2 D graphics in XML. • Canvas draws 2 D graphics, on the fly (with a Java. Script). • SVG is XML based, which means that every element is available within the SVG DOM. You can attach Java. Script event handlers for an element. • In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. • Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. • If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.
• • The most interesting new API's are: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE
• The HTML Geolocation API is used to get the geographical position of a user. • Use the get. Current. Position() method to get the user's position. • Geolocation is much more accurate for devices with GPS, like i. Phone. • Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. • In HTML 5, drag and drop is part of the standard, and any element can be draggable.
• To make an element draggable, set the draggable attribute to true: • What to Drag - ondragstart and set. Data() – Then, specify what should happen when the element is dragged. • The ondragover event specifies where the dragged data can be dropped. • Do the Drop - ondrop • When the dragged data is dropped, a drop event occurs.
What is HTML Local Storage? • With local storage, web applications can store data locally within the user's browser. • Before HTML 5, application data had to be stored in cookies, included in every server request. • Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. • Unlike cookies, the storage limit is far larger (at least 5 MB) and information is never transferred to the server. • Local storage is per domain. All pages, from one domain, can store and access the same data. • HTML Local Storage Objects • HTML local storage provides two objects for storing data on the client: • window. local. Storage - stores data with no expiration date • window. session. Storage - stores data for one session (data is lost when the browser tab is closed)
What is Application Cache? • HTML 5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. • Application cache gives an application three advantages: • Offline browsing - users can use the application when they're offline • Speed - cached resources load faster • Reduced server load - the browser will only download updated/changed resources from the server
• A web worker is a Java. Script running in the background, without affecting the performance of the page. • Server-Sent Events allow a web page to get updates from a server.
HTML Block and Inline Elements • Block-level Elements • A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). • The <div> element is a block-level element. • Examples of block-level elements: • <div> • <h 1> - <h 6> • <p> • <form>
• Inline Elements • An inline element does not start on a new line and only takes up as much width as necessary. • This is an inline <span> element inside a paragraph. • Examples of inline elements: • <span> • <a> • <img>
- Slides: 42
