The Realm Welcome to The Realm ~ Provehito In Altum |
| | XHTML | |
| | Author | Message |
---|
Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: XHTML Sat Oct 13, 2007 10:24 am | |
| Introduction To XHTML
XHTML is a stricter and cleaner version of HTML. What You Should Already Know
Before you continue you should have a basic understanding of the following:
* HTML and the basics of building web pages
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
All New Browsers Support XHTML
XHTML is compatible with HTML 4.01.
All new browsers have support for XHTML.
About This Tutorial
The next chapters of this tutorial will explain:
* Why you should use XHTML * The syntax of XHTML * How W3Schools was converted to XHTML * XHTML validation * XHTML modularization | |
| | | Morgan Senior Member
Number of posts : 227 Location : Wales Points : Registration date : 2007-09-19
| Subject: Re: XHTML Sat Oct 13, 2007 2:05 pm | |
| XHTML is fussy I prefure HTML, much easier and easier to find mistakes. | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Sat Oct 13, 2007 4:29 pm | |
| Well yes but you can do a lot more stuff with XHTML then with HTML. | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Sat Oct 13, 2007 4:29 pm | |
| Part 2 XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. Why XHTML? We have reached a point where many pages on the WWW contain "bad" HTML. The following HTML code will work fine if you view it in a browser, even if it does not follow the HTML rules: - Code:
-
<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body>
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, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining HTML and XML, and their strengths, 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 while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!! | |
| | | Morgan Senior Member
Number of posts : 227 Location : Wales Points : Registration date : 2007-09-19
| Subject: Re: XHTML Sun Oct 14, 2007 7:36 am | |
| - Luky wrote:
- Well yes but you can do a lot more stuff with XHTML then with HTML.
Really? Like what? | |
| | | Guest Guest
| Subject: Re: XHTML Sun Oct 14, 2007 8:53 am | |
| It deals nicer with CSS already |
| | | Nessa Admin
Number of posts : 7028 Age : 111 Life : Points : Mood : Registration date : 2007-07-20
| Subject: Re: XHTML Sun Oct 14, 2007 2:28 pm | |
| | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Mon Oct 15, 2007 1:48 pm | |
| Part 3 You can prepare yourself for XHTML by starting to write strict HTML. How To Get Ready For XHTML XHTML is not very different from the HTML 4.01 standard. The Most Important Differences: * XHTML elements must be properly nested * XHTML elements must always be closed * XHTML elements must be in lowercase * XHTML documents must have one root element XHTML Elements Must Be Properly Nested In HTML, some elements can be improperly nested within each other, like this: - Code:
-
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this: - Code:
-
<b><i>This text is bold and italic</i></b>
Note: A common mistake with nested lists, is to forget that the inside list must be within - Code:
-
<li> and - Code:
-
</li> tags. This is wrong: - Code:
-
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>
This is correct: - Code:
-
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
XHTML Elements Must Always Be Closed Non-empty elements must have an end tag. This is wrong: - Code:
-
<p>This is a paragraph <p>This is another paragraph
This is correct: - Code:
-
<p>This is a paragraph</p> <p>This is another paragraph</p>
Empty Elements Must Also Be Closed Empty elements must either have an end tag or the start tag must end with />. This is wrong: - Code:
-
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">
This is correct: - Code:
-
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">
XHTML Elements Must Be In Lower Case The XHTML specification defines that the tag names and attributes need to be lower case. This is wrong: - Code:
-
<BODY> <P>This is a paragraph</P> </BODY>
This is correct: - Code:
-
<body> <p>This is a paragraph</p> </body>
XHTML Documents Must Have One Root Element All XHTML elements must be nested within the - Code:
-
<html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is: - Code:
-
<html> <head> ... </head> <body> ... </body> </html>
| |
| | | Bad Wolf Senior Member
Number of posts : 268 Age : 46 Location : The Evil Empire Points : Mood : Registration date : 2007-08-08
| Subject: Re: XHTML Mon Oct 15, 2007 8:36 pm | |
| i read XML documents on a daily basis to help troubleshoot and send trouble tickets for the system i program.
and yes, it really does help with CSS. I could not get a IF CSS i was creating to show properly in FireFox spliced it with a XML converter and *whalla* it now displays properly in FF and IE | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Tue Oct 16, 2007 4:16 pm | |
| Part 4 Writing XHTML demands a clean HTML syntax. Some More XHTML Syntax Rules: * Attribute names must be in lower case * Attribute values must be quoted * Attribute minimization is forbidden * The id attribute replaces the name attribute * The XHTML DTD defines mandatory elements Attribute Names Must Be In Lower Case This is wrong: - Code:
-
<table WIDTH="100%">
This is correct: - Code:
-
<table width="100%">
Attribute Values Must Be Quoted This is wrong: - Code:
-
<table>
This is correct: - Code:
-
<table width="100%">
Attribute Minimization Is Forbidden This is wrong: - Code:
-
<input> <input> <input> <option> <frame>
This is correct: - Code:
-
<input> <input> <input> <option> <frame>
Here is a list of the minimized attributes in HTML and how they should be written in XHTML: - Code:
-
HTML XHTML compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize"
The id Attribute Replaces The name Attribute HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead. This is wrong: - Code:
-
<img src="picture.gif" name="picture1">
This is correct: - Code:
-
<img src="picture.gif" id="picture1">
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this: - Code:
-
<img src="picture.gif" id="picture1" name="picture1">
IMPORTANT Compatibility Note: To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol. The Lang Attribute The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, you must add the xml:lang attribute, like this: - Code:
-
<div lang="no" lang="no">Heia Norge!</div>
Mandatory XHTML Elements All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element. This is a minimum XHTML document template: - Code:
-
<DOCTYPE> <html> <head> <title>Title goes here</title> </head>
<body> </body>
</html>
Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag. You will learn more about the XHTML document type definition in the next chapter. | |
| | | Nessa Admin
Number of posts : 7028 Age : 111 Life : Points : Mood : Registration date : 2007-07-20
| Subject: Re: XHTML Tue Oct 16, 2007 4:35 pm | |
| Luky, you're so Smart when it comes to stuff like this. I would never be able to figure this stuff out on my own babes. | |
| | | Guest Guest
| Subject: Re: XHTML Tue Oct 16, 2007 4:47 pm | |
| Nessa: Cheat |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Wed Oct 17, 2007 7:30 am | |
| Part 5 The XHTML standard defines three Document Type Definitions. The most common is the XHTML Transitional. <DOCTYPE> Is Mandatory An XHTML document consists of three main parts: * the DOCTYPE * the Head * the Body The basic document structure is: - Code:
-
<DOCTYPE> <html> <head> <title>... </title> </head> <body> ... </body> </html>
The DOCTYPE declaration should always be the first line in an XHTML document. An XHTML Example This is a simple (minimal) XHTML document: - Code:
-
<DOCTYPE> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
The DOCTYPE declaration defines the document type: - Code:
-
<DOCTYPE>
The rest of the document looks like HTML: - Code:
-
<html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
The 3 Document Type Definitions * DTD specifies the syntax of a web page in SGML. * DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations. * XHTML is specified in an SGML document type definition or 'DTD'. * An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup. There are currently 3 XHTML document types: * STRICT * TRANSITIONAL * FRAMESET XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset. XHTML 1.0 Strict - Code:
-
<DOCTYPE>
Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets. XHTML 1.0 Transitional - Code:
-
<DOCTYPE>
Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets. XHTML 1.0 Frameset - Code:
-
<DOCTYPE>
Use this when you want to use HTML Frames to partition the browser window into two or more frames. | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Wed Oct 17, 2007 3:46 pm | |
| Part 6 A DOCTYPE Definition Was Added The following DOCTYPE declaration was added as the first line of every page: - Code:
-
<DOCTYPE>
Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to. A Note About The DOCTYPE Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML. Be aware however, that newer browsers (like Internet Explorer 6) might treat your document differently depending on the <DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE. Lower Case Tag And Attribute Names Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. The same was done for attribute names. We have always tried to use lower case names in our Web, so the replace function did not produce many real substitutions. All Attributes Were Quoted Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted, every page in the web was checked to see that attributes values were properly quoted. This was a time-consuming job, and we will surely never again forget to put quotes around our attribute values. - Code:
-
Empty Tags: <hr> , <br> and <img>
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr> and <br>.
This produced a problem with Netscape that misinterpreted the <br> tag. We don't know why, but changing it to <br> worked fine. After that discovery, a general search and replace function was executed to swap the tags.
A few other tags (like the <img> tag) were suffering from the same problem as above. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually.
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Wed Oct 17, 2007 3:46 pm | |
| Part 7 An XHTML document is validated against a Document Type Definition. Validate XHTML With A DTD An XHTML document is validated against a Document Type Definition (DTD). Before an XHTML file can be properly validated, a correct DTD must be added as the first line of the file. The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets: - Code:
-
!DOCTYPE html PUBLIC "-//google//DTD XHTML 1.0 Strict//EN" "http://www.google.com/TR/xhtml1/DTD/xhtml1-strict.dtd"
The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes: - Code:
-
!DOCTYPE html PUBLIC "-//google//DTD XHTML 1.0 Transitional//EN" "http://www.google.com/TR/xhtml1/DTD/xhtml1-transitional.dtd"
The Frameset DTD includes everything in the transitional DTD plus frames as well: - Code:
-
!DOCTYPE html PUBLIC "-//google//DTD XHTML 1.0 Frameset//EN" "http://www.google.com/TR/xhtml1/DTD/xhtml1-frameset.dtd"
This is a simple XHTML document: - Code:
-
<DOCTYPE> <html> <head> <title>simple document</title> </head> <body> <p>a simple paragraph</p> </body> </html>
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Thu Oct 18, 2007 2:00 am | |
| Part 8 The XHTML modularization-model defines the modules of XHTML. Why XHTML Modularization? XHTML is a simple, but large language. XHTML contains most of the functionality a web developer will need. For some purposes XHTML is too large and complex, and for other purposes it's too simple. By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards into larger and more complex applications. With modular XHTML, designers can: * Choose the elements to be supported by a device using standard XHTML building blocks * Add extensions to XHTML, using XML, without breaking the XHTML standard * Simplify XHTML for devices like hand held computers, mobile phones, TV, and home appliances * Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia) * Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices) XHTML Modules W3C has split the definition of XHTML into 28 modules: - Code:
-
Module name Description Applet Module Defines the deprecated* applet element Base Module Defines the base element Basic Forms Module Defines the basic forms elements Basic Tables Module Defines the basic table elements Bi-directional Text Module Defines the bdo element Client Image Map Module Defines browser side image map elements Edit Module Defines the editing elements del and ins Forms Module Defines all elements used in forms Frames Module Defines the frameset elements Hypertext Module Defines the a element Iframe Module Defines the iframe element Image Module Defines the img element Intrinsic Events Module Defines event attributes like onblur and onchange Legacy Module Defines deprecated* elements and attributes Link Module Defines the link element List Module Defines the list elements ol, li, ul, dd, dt, and dl Metainformation Module Defines the meta element Name Identification Module Defines the deprecated* name attribute Object Module Defines the object and param elements Presentation Module Defines presentation elements like b and i Scripting Module Defines the script and noscript elements Server Image Map Module Defines server side image map elements Structure Module Defines the elements html, head, title and body Style Attribute Module Defines the style attribute Style Sheet Module Defines the style element Tables Module Defines the elements used in tables Target Module Defines the target attribute Text Module Defines text container elements like p and h1
* Deprecated elements should not be used in XHTML.
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Thu Oct 18, 2007 3:55 pm | |
| Part 9 XHTML tags can have attributes. The special attributes for each tag are listed under each tag description. The attributes listed here are the core and language attributes that are standard for all tags (with a few exceptions). Core Attributes Not valid in base, head, html, meta, param, script, style, and title elements. - Code:
-
Attribute Value Description class class_rule or style_rule The class of the element id id_name A unique id for the element style style_definition An inline style definition title tooltip_text A text to display in a tool tip
Language Attributes Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. - Code:
-
Attribute Value Description dir ltr | rtl Sets the text direction lang language_code Sets the language code
Keyboard Attributes - Code:
-
Attribute Value Description accesskey character Sets a keyboard shortcut to access an element tabindex number Sets the tab order of an element
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of attributes that can be inserted into HTML tags to define event actions. Window Events Only valid in body and frameset elements - Code:
-
Attribute Value Description onload script Script to be run when a document loads onunload script Script to be run when a document unloads
Form Element Events Only valid in form elements. - Code:
-
Attribute Value Description onchange script Script to be run when the element changes onsubmit script Script to be run when the form is submitted onreset script Script to be run when the form is reset onselect script Script to be run when the element is selected onblur script Script to be run when the element loses focus onfocus script Script to be run when the element gets focus
Keyboard Events Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. - Code:
-
Attribute Value Description onkeydown script What to do when key is pressed onkeypress script What to do when key is pressed and released onkeyup script What to do when key is released
Mouse Events Not valid in base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title elements. - Code:
-
Attribute Value Description onclick script What to do on a mouse click ondblclick script What to do on a mouse doubleclick onmousedown script What to do when mouse button is pressed onmousemove script What to do when mouse pointer moves onmouseover script What to do when mouse pointer moves over an element onmouseout script What to do when mouse pointer moves out of an element onmouseup script What to do when mouse button is released
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: XHTML Sat Oct 20, 2007 2:58 am | |
| Part 10
XHTML Summary
This tutorial has taught you how to create stricter and cleaner HTML pages.
You have learned that all XHTML elements must be properly nested, XHTML documents must be well-formed, all tag names must be in lowercase, and that all XHTML elements must be closed.
You have also learned that all XHTML documents must have a DOCTYPE declaration, and that the html, head, title, and body elements must be present. Now You Know XHTML, What's Next?
The next step is to learn CSS and JavaScript.
CSS
CSS is used to control the style and layout of multiple Web pages all at once.
With CSS, all formatting can be removed from the HTML document and stored in a separate file.
CSS gives you total control of the layout, without messing up the document content.
JavaScript
JavaScript can make your web site more dynamic.
A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.
JavaScript is the most popular scripting language on the internet and it works with all major browsers. | |
| | | Sponsored content
| Subject: Re: XHTML | |
| |
| | | | XHTML | |
|
| Permissions in this forum: | You cannot reply to topics in this forum
| |
| |
| |
|