tag:blogger.com,1999:blog-378353572024-02-28T14:00:36.417-08:00Learn xhtml | xhtml tips | xhtml tutoriallearn xhtml, learn xml, learn css, xml, Complete information on xhtml, About xhtml, deference between xhtml, html, xml, dtd, what is xhtml, what is xml, diffrence between xml and xhtml, difference between html and xhtml, define xhtml, define css,Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-37835357.post-88160753441798608042012-12-18T21:18:00.000-08:002012-12-18T21:18:10.488-08:00XHTML Four Basic Elements <div dir="ltr" style="text-align: left;" trbidi="on">
<b>Four elements that must be in each page. These elements form a skeleton of the page.</b><br />
<br />
<br />
<html><span class="Apple-tab-span" style="white-space: pre;"> </span>XHTML start tag. First element in the page.</html><br />
<head><span class="Apple-tab-span" style="white-space: pre;"> </span>Header start tag. Always follows the XHTML element. Second element in the page.</head><br />
<title> < /title><span class="Apple-tab-span" style="white-space:pre"> </span>Title, title-end tags. Begins and ends a title for the browser title bar & bookmark. Must be inside the header.</p>
<p>
</head><span class="Apple-tab-span" style="white-space:pre"> </span>Header-end tag. Ends the header element.</p>
<p>
<body><span class="Apple-tab-span" style="white-space:pre"> </span>Body start tag. Begins the body or visible part of your page. Follows the header.</p>
<p>
</body><span class="Apple-tab-span" style="white-space:pre"> </span>Body-end tag. Ends the body.</p>
<p>
</html><span class="Apple-tab-span" style="white-space:pre"> </span>HTML-end tag, Ends the html page. Last tag in the page</p>
<p>
</p>
</div>
</title></div>
Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-92215481456641181142011-09-14T00:14:00.000-07:002011-09-14T00:14:38.303-07:00XHTML VS HTML - Difference between HTML, XHTML<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post-content clear-block"> <h3>What Is XHTML?</h3><ul><li>XHTML stands for EXtensible HyperText Markup Language</li>
<li>XHTML is almost identical to HTML 4.01</li>
<li>XHTML is a stricter and cleaner version of HTML</li>
<li>XHTML is HTML defined as an XML application</li>
<li>XHTML is a W3C Recommendation of January 2000.</li>
<li>XHTML is supported by all major browsers.</li>
</ul><h3>Bad HTML</h3><br />
<br />
<title>This is bad HTML</title><br />
<br />
<br />
<h1>Bad HTML<br />
This is a paragraph<br />
<br />
</h1><h3>The Most Important Differences from HTML:</h3><ul><li>XHTML elements must be <strong> properly nested</strong></li>
<li>XHTML elements must always be <strong> closed</strong></li>
<li>XHTML elements must be in <strong> lowercase</strong></li>
<li>XHTML documents must have <strong>one root element</strong></li>
</ul><h3>XHTML Elements Must Be Properly Nested</h3>In XHTML, all elements must be properly nested within each other, like this:<br />
<strong><b><i>This text is bold and italic</i></b></strong><br />
<h3>XHTML Elements Must Always Be Closed</h3>Non-empty elements must have a closing tag.<br />
<strong>This is wrong:</strong><br />
<br />
This is a paragraph<br />
<br />
This is another paragraph<br />
<strong>This is correct:</strong><br />
<br />
This is a paragraph<br />
<br />
This is another paragraph<br />
<br />
<h3>Empty Elements Must Also Be Closed</h3>Empty elements must also be closed.<br />
<strong>This is wrong:</strong><br />
A break: <br />
<br />
A horizontal rule: <br />
<hr /><br />
An image: <img alt="”Happy" face”="" src="”happy.gif”" /><br />
<strong>This is correct:</strong><br />
A break: <br />
<br />
A horizontal rule: <br />
<hr /><br />
An image: <img alt="”Happy" face”="" src="”happy.gif”" /><br />
<h3>XHTML Elements Must Be In Lower Case</h3>Tag names and attributes must be in lower case.<br />
<strong>This is wrong:</strong><br />
<br />
<br />
This is a paragraph<br />
<br />
<br />
<strong>This is correct:</strong><br />
<br />
<br />
This is a paragraph<br />
<br />
<br />
<h3>XHTML Documents Must Have One Root Element</h3>All XHTML elements must be nested within the root element. Child elements must be in pairs and correctly nested within their parent element.<br />
<strong>The basic document structure is:</strong><br />
<br />
… <br />
… <br />
<br />
<br />
<b>Source:</b> <a href="http://www.psd-to-xhtml-conversion.com/review/xhtml-tutorials/">http://www.psd-to-xhtml-conversion.com/review/xhtml-tutorials/</a><a href="http://www.psd-to-xhtml-conversion.com/review/xhtml-tutorials/">http://www.psd-to-xhtml-conversion.com/review/xhtml-tutorials/</a><br />
</div></div>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-32514334393687274762011-09-08T09:51:00.001-07:002011-09-08T09:51:37.847-07:00HTML5 is...NOW byJason Beaird<div dir="ltr" style="text-align: left;" trbidi="on"><iframe allowfullscreen="" frameborder="0" height="225" src="http://player.vimeo.com/video/16319448?title=0&byline=0&portrait=0" webkitallowfullscreen="" width="400"></iframe><br />
<a href="http://vimeo.com/16319448">HTML5 is...NOW! - Jason Beaird</a> from <a href="http://vimeo.com/jasongraphix">Jason Beaird</a> on <a href="http://vimeo.com/">Vimeo</a>.</div>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-8713800064410619402010-07-15T11:11:00.000-07:002010-07-15T11:20:22.240-07:00Advantages of Vertical Navigation Designs<p>Navigation Menus are one of the most important elements in a website as they are usually the first thing visitors connect to, using them users can go from page to page exploring the website. These menus form a common link for users to ‘walk around the site’ using the navigation menu as a ‘map’.<br /><br />Due to their pivotal role in a website designers, information architects, usability researchers and user experience specialists devote so much effort and resources into developing aesthetically pleasing and user-friendly navigation systems.<br /><br />Along with functionality and visual appeal the placement of the navigation menu has to be kept in mind. To instantly attract the visitor’s eye they need to be placed in the most visible location of the homepage as well as any other page.<br /><br />Website navigation menus have to predominant styles vertical and <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajelRLck29GoCOsC2ensfYbrtEptuRvXIO5uxmzJ1eOTL6L2FoFtHlBNFqkvEWwEuUQx1ost4cadjkTxedMiiaiysrx8H7VhDBFfgIQPXzQjXTjZkCeBByU0tKpcyP81m64wn4w/s1600/vertical-menu.png"><img id="BLOGGER_PHOTO_ID_5494199132571499106" style="FLOAT: right; MARGIN: 0px 0px 10px 10px; WIDTH: 131px; CURSOR: hand; HEIGHT: 200px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajelRLck29GoCOsC2ensfYbrtEptuRvXIO5uxmzJ1eOTL6L2FoFtHlBNFqkvEWwEuUQx1ost4cadjkTxedMiiaiysrx8H7VhDBFfgIQPXzQjXTjZkCeBByU0tKpcyP81m64wn4w/s200/vertical-menu.png" border="0" /></a>horizontal. The horizontal menu present items side by side, whereas Vertical navigation menus stack items on top of each other. Bothe styles have their pros but here we will focus on the advantages and designing scope of the vertical style navigation menu.<br /><br /><strong>Advantages of Vertical Navigation Menus</strong> </p><br /><ul><br /><li>Vertical Navigation Menus are simple and clean in looks yet robust in functionality and interaction. </li><br /><li>Vertical Navigation style allow for highly compact and modular menus that appear distinct from the rest of the layout. </li><br /><li>A distinct advantage of vertical navigation menu is that it shows hierarchy and allows you to group menu items without resorting to drop-down menus. </li><br /><li>Vertical Navigation style is able to accommodate more menu items. </li><br /><li>Big font sizes with different font types can be used as there is more vertical space to work with in the vertical navigation menu. </li><br /><li>Images or animations can also be used due to the vertical space available in the vertical navigation menu.<br /></li></ul>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-26528554637598160042010-04-14T12:55:00.000-07:002010-04-14T12:57:21.517-07:007 Tips for a Stellar Web LayoutPart of being a small business owner is most likely being involved in the process to creating your website. What is really important to include when you are considering your website layout? Is there a specific layout that works better than others? When I work with small business owners, I encourage them to consider the following:<br /><br />1. Include ways for people to easily contact you<br />Did you know that everyone prefers to connect differently? Some of my clients are on Facebook all day, others are on Twitter, some prefer email and others want the human interaction of a telephone. In order to communicate to each of these audiences, make sure you have the following on every page: e-newsletter sign-up, a link to follow you on your Facebook fan page and Twitter, your phone number and if you have a blog, an RSS feed. You never know what page your future customer is going to come in on, so make your contact info readily available.<br /><br />2. Make a list of all the pages and sub-pages you want on your site<br />Your programmer and designer will love if you hand them a list of pages and sub-pages you want on your site. If you have no clue how you want your information spread out on your website, make sure you tell your programmer and designer. When I work with clients, I normally ask how many total pages they want on their website. If they have no idea, it says to me that the client hasn’t thought through their marketing collateral or position. In order for me to get an accurate picture of your goals, I’ll need that list. And who knows your business better than you?<br /><br />3. Incorporate a wireframe<br />A wireframe is a rough sketch or simple boxes showing which area will be for what category on each page. This allows one major thing – the client, the programmer and the designer all agreeing on the layout before the work gets started. This is especially important on a website with lots of information. As a rule, put the most important information towards the top, so people don’t have to scroll down to see it. Plus, using a wireframe helps point out which areas on the page are going to be reserved for the call to action, the logo and search box.<br /><br />4. Consider the programming platform<br />Before programming one line of code, make sure you as the client, programmer and designer all agree on what type of code that website will be programmed in. This conversation should be had at the same stage as presenting the wireframe concepts. Different types can include: Straight HTML, Flash, XHTML, CSS or Content management systems such as Wordpress or Joomla. To help you decide, consider – will you need to update the site often? Or is it a strictly an informational site? Is it to showcase photography or an e-commerce site? Every web site is different and you may find yourself using a mixture of elements, but the important thing is to discuss this ahead of time.<br /><br />5. Keep it simple<br />I have this philosophy in all matters of design – keep it simple! Sure your website in all flash may look cool, but can you navigate it easily? Will customers wait for large load times or move on to another site? Do you want to risk losing a sale? Besides navigation, also keep your color palette simple as well. There is nothing worse than pulling up a site that is bright neon green with purple stars and has a yellow flashing burst telling you to click there. A color palette of 3-4 colors is plenty and think subtlety rather than bright. Use lots of white space. Think of the large websites you frequent – Amazon or NY Times – both of these communicate a brand and keep it simple.<br /><br />6. Be consistent<br />Make your web page layout match the rest of your collateral. Part of creating a brand, is being consistent across all media – in print and online. When someone hands me their brochure, it should have the same fonts and colors of their website. Consistency helps create trust, which is a huge part of branding.<br /><br />All of your web pages should match. If you are on the About page, it should match your Blog and your Home page. What exactly should match? Keep your logo in the same spot on all pages. Keep your navigation and footer with the same info and colors. If you are inconsistent it can lead to someone thinking they left your website. Which in turn means – a lost customer. Remember consistency = trust = brand building.<br /><br />7. Consider the path you want the customer to take<br />Make sure you have a precise goal. Is to convert visitors to your email list? Or is it to purchase a certain product? Is it to sign-up on your Facebook fan page? It is informational? Make the path you want your clients to take obvious and simple. Don’t overwhelm them with 6 options, but do keep it simple. Have a focus.Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-54564091859529314182009-09-08T05:43:00.000-07:002009-09-08T05:44:32.613-07:00CSS and IE6 compatibility issuesSherweb counts Internet Explorer too among Microsoft's mistakes. However, according to most other analysts it is IE6 which particularly gave users trouble. Some reviewers have termed the browser as the company's worst-ever browser. In May 2006, PCWorld rated IE 6 at no. 8 among the worst tech products of all time.<br /><br />The browser is often criticsed for being vulnerable to malicious attacks, viruses and malware. According to security experts, IE 6 failed on several compatibility parameters with Web standards. Some reports claim that IE 6's design had a security flaw.<br /><br />The version was also said to be unstable. IE6 didn't support CSS version 2, which makes it difficult for web developers to ensure compatibility with the browser. Also, many analysts believe that the IE6's domination for nearly six years helped rivals grow.<br /><br />However, though some reviewers may have trashed IE 6, the browser still continues to lead in marketshare. According to recent reports IE6's market share in July 2009 stood at roughly 27.2%, ahead of IE7's 23% and Firefox 3's 16%.<br /><br />We provide You <a href="http://www.webdesignshoppe.com/psd-to-xhtml-conversion.htm">CSS/xhtml Conversion Services</a> and <a href="http://www.seoonhire.com">Professional Seo Services</a> to Tackle problems mention aboveIshu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com1tag:blogger.com,1999:blog-37835357.post-33334496611585105612009-08-25T05:11:00.000-07:002009-08-25T05:15:03.245-07:00Psd To Xhtml ConversionConversion of digital images (e.g., prepared as Adobe Photoshop .psd files) into XHTML/CSS markups is a necessary phase of most web development projects. As a stand-alone service design-to-XHTML slicing emerged a few years ago. Its appearance was the market response to increasingly growing requirements to quality of XHTML/CSS code, its compliance with WWW Consortium (W3C) standards and browser compatibility.<br /><br />By its nature PSD-to-XHTML conversion is work at the border of two quite different fields - design and programming - and requires specific skills and knowledge to implement. Key customers of PSD-to-XHTML services are web development companies, designers, bloggers, and website owners.<br /><br />This link will definetly help you in learning Psd to xhtml conversion.<br />http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/<br /><br />You call also webdesignshoppe.com for <a href="http://www.webdesignshoppe.com">psd to xhtml conversoin services</a>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com1tag:blogger.com,1999:blog-37835357.post-3542845595009010442009-02-03T01:37:00.000-08:002009-02-03T01:40:54.337-08:00JQuery TutorialPlease click the link below for the detailed JQuery tutorial. This is the best Online tutorial for Jquery.<br /><br /><a href="http://docs.jquery.com/Tutorials">JQuery Tutorial</a><br /><br /><br />Please feel free to give your opinion on this tutorialNaveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-24815841474923804662009-02-03T01:27:00.000-08:002009-02-03T01:33:33.690-08:00JQUERYjQuery is a JavaScript library (or framework), created by John Resig in 2006. I am a Web Developer and I have several years of experience working with JavaScript. I watched the language mature from what is now called Web 1.0 (when it was used simply as a script language to process form input) to Web 2.0. It was a little after I learned about JavaScript's Object-Oriented capabilities that I first heard of jQuery from a friend. My friend is also a hobbyist Web Developer, who instant messaged me the link to the jQuery website (www.jquery.com) and said I might find it interesting. At the time I was a little hesitant to give jQuery a try. After all, what was this jQuery, a JavaScript querying framework of some sorts? What did it query and how? What could I do with it?<br /><br />Looking at the jQuery black website's front page, and the large "Download the most-recent version" button it all seemed like I would spend a long time to learn about the benefits, advantages, disadvantages (or pros and cons) of this framework. I have already spent enough time learning about Object-Oriented JavaScript and experimented with my own website frameworks written in JavaScript. Why would I consider learning a JavaScript framework that someone else wrote?<br /><br /><span style="font-weight:bold;">The simple jQuery world</span><br /><br />jQuery was starting to ring in my ears more often than I had expected as the time went by. I heard that important Internet-based companies were using jQuery. I knew there may have been something about it I should know, but still couldn't dedicate enough time to learn anything about it. All I heard was that there were some kinds of jQuery "plugins" that everyone wrote and uploaded on the Internet. I was starting to get more curious, and even made plans to look at jQuery in the near future. It was only a few weeks later that I was interviewing with an Internet-based company, one of the candidacy requirements was basic knowledge of JavaScript and jQuery. To test my level of expertise with JavaScript, I was asked to write my own jQuery plugin by the software engineers in the company. I knew little about jQuery but was getting increasingly surprised at how easy it was to program by calling various methods of the framework. The framework that in a peculiar way asked you to call each method with a function represented by the dollar sign ($) character. But more about this later in this blog.<br /><span style="font-weight:bold;"><br />So what kind of things can you do with jQuery?</span><br /><br />My first jQuery shuffle plugin, called gShuffle (play with gShuffle) features some of the interesting things you can do with jQuery. For this plugin I decided to slice up a picture of the Mona Lisa painting by Leonardo DaVinci. You will find more information on that page. You can also take a quick look at the gShuffle source code and see for yourself how simple the code is that achieves a fairly complex (compared to the old Web 1.0 standards) "shuffle" effect.<br /><br />For those who may not know, using dynamic properties of web programming is the new trend (I am writing this as of December, 2008) in the industry and jQuery makes it just that much simpler to work with dynamic elements. No longer would I need to create utility functions for things such as fade-in and out effects, sliding and resizing effects and coming up with clever ways to capture events with JavaScript code to keep my HTML code clean of those onclick = '...' commands within the tags. jQuery makes assigning a function to capture dispatched events incredibly simple and elegant. It is possible to assign a callback function to all DOM (document object model) elements of interest on your page with a single function call! Of course it would also do so in a multi-browser compatible way.<br /><br /><span style="font-weight:bold;">Is jQuery faster than JavaScript?</span><br /><br />jQuery is a web development framework that is written in JavaScript and therefore cannot be "faster" than JavaScript. However, jQuery certainly makes your code much more elegant. jQuery uses CSS-like selectors (the space, the pound sign, the dot and the greater than sign) to select a set of desired elements and apply any function to them. If you are curious about how jQuery does this, the source code is available at their website as a regular js file and does not contain anything that you would not expect from JavaScript. The developers of MooTools have created a page that demonstrates performance of several JavaScript frameworks that inlcudes jQuery. jQuery is a very well-designed framework and it is no surprise that it scores high among the top frameworks as the MooTool's CSS Selector Speed Test page demonstrates that.<br /><br /><span style="font-weight:bold;">Should I use jQuery or JavaScript?</span><br /><br />This is a good question. This really depends on the circumstances and what kind of things you are working on. I see that the web-based applications that assume heavy-traffic bandwidth will benefit from jQuery's size. All, or at least most developers will obviously benefit from jQuery's syntax, short learning curve, and the logical way in which jQuery works (it is possible to create multi-chained statements where each member function returns a jQuery object for the element you are working with, so that you can apply additional code to the elements that are returned). On the other hand, for projects where bandwidth volume plays little role, regular Javascript code may be used if the programmed doesn't feel comfortable with using jQuery yet. Having said this, it is difficult to go back to "regular" JavaScript programming once you have experienced front-end web development with jQuery, especially if you are working with a lot of dynamic elements in your project.<br /><br /><span style="font-weight:bold;">Should I use jQuery or Prototype?</span><br /><br />There is a heated debate in the Web Developer community as to which framework is better, and which one to choose for your own projects. The answer to this question is not simple due to the increasing number of different JavaScript frameworks, their feature sets, the learning curve, the .js file size for websites that care about bandwidth and finally, the script execution speed (in particular the CSS-selector algorithms). It seems that quite a few people who started with the Prototype library are now baptising to jQuery for a few of those reasons. That's not to say that jQuery is better than Prototype or vice versa. There is simply no "best" JavaScript framework, and it is the choice that is left to the developer. It seems that once you learn jQuery it is difficult to make a different choice. There are probably less people who have converted to Prototype from jQuery.Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-64229452682542043462008-12-22T23:07:00.000-08:002008-12-22T23:17:45.047-08:00Horizontal CSS Dropdown Popout MenuRequirements for Horizontal CSS Menus<br /><br /><a href="http://www.crazzy.in/CSS%20DropDown%20Menu%20Tutorial.htm">Grab HTML From Here </a><br /><br /><pre>#menu {<br />width: 100%;<br />background: #eee;<br />float: left;<br />}<br />#menu ul {<br />list-style: none;<br />margin: 0;<br />padding: 0;<br />width: 12em;<br />float: left;<br />}</pre>The above sets the width onto the individual lists, <code><ul></code>'s, this time as the need to float side by side to make them fit into whatever horizontal space is available to them. This horizontal width is determined by setting the width of the <code>#menu div</code> itself. The <code>#menu div</code> is also floated in order to "contain" it's floated descendants.Then we apply the required formatting to the <code><h2></code> headings and the <code><a></code> anchors, again I'm using the same formatting as the vertical menu<br /><pre>#menu a, #menu h2 {<br />font: bold 11px/16px arial, helvetica, sans-serif;<br />display: block;<br />border-width: 1px;<br />border-style: solid;<br />border-color: #ccc #888 #555 #bbb;<br />margin: 0;<br />padding: 2px 3px;<br />}<br /><br />#menu h2 {<br />color: #fff;<br />background: #000;<br />text-transform: uppercase;<br />}<br /><br />#menu a {<br />color: #000;<br />background: #efefef;<br />text-decoration: none;<br />}<br /><br />#menu a:hover {<br />color: #a00;<br />background: #fff;<br />}<br /></pre><p>Color to taste.</p><span style="font-weight: bold;">Positioning the Popout Menus and Dropdown Menus</span><br /><pre>#menu li {position: relative;}<br /><br />#menu ul ul {<br />position: absolute;<br />z-index: 500;<br />}<br /><br />#menu ul ul ul {<br />top: 0;<br />left: 100%;<br />}<br /></pre><p>The position: relative; on the <code><li></code> elements establish <strong>containing blocks</strong> for the descendant <code><ul></code> elements.</p>All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.<br /><h3>Hiding and Revealing using <code>:hover</code></h3>This time we actually do want to hide the second level menu (top choice) as we only want the <code><h2></code> heading, inside the top level <code><ul></code> to remain visible.<br /><pre>div#menu ul ul,<br />div#menu ul li:hover ul ul,<br />div#menu ul ul li:hover ul ul<br />{display: none;}<br /><br />div#menu ul li:hover ul,<br />div#menu ul ul li:hover ul,<br />div#menu ul ul ul li:hover ul<br />{display: block;}</pre>The <code>display: block;</code> rules show the three levels being activated with the <code>display: none;</code> rules being entered afterwards to more specifically hide the unwanted (deeper nested) lists (counteract them).<br /><h2>Fix it for IE!</h2>The complete conditional CSS is the same as the vertical menu's code and looks like this:<!--[if IE]><br /><pre><style type="text/css" media="screen"><br />body {<br />behavior: url(csshover.htc);<br />font-size: 100%;<br />}<br /><br />#menu ul li {float: left; width: 100%;}<br />#menu ul li a {height: 1%;}<br /><br />#menu a, #menu h2 {<br />font: bold 0.7em/1.4em arial, helvetica, sans-serif;<br />}<br /></style><br /><![endif]--></pre>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com1tag:blogger.com,1999:blog-37835357.post-86523898540339709872008-12-21T21:50:00.000-08:002008-12-22T23:19:41.113-08:00VERTICAL CSS POP OUT MENU TUTORIALRequirements for Vertical CSS Menus<br /><br /><a href="http://www.crazzy.in/CSS%20DropDown%20Menu%20Tutorial.htm">Grab HTML From Here </a><br /><br /><h2 id="vertical">Vertical Pop Out Menu</h2><br /><pre>#menu {<br />width: 12em; /* set width of menu */<br />background: #eee;<br />}<br /><br />#menu ul { /* remove bullets and list indents */<br />list-style: none;<br />margin: 0;<br />padding: 0;<br />}<br /><br />/* style, color and size links and headings to suit */<br />#menu a, #menu h2 {<br />font: bold 11px/16px arial, helvetica, sans-serif;<br />display: block;<br />border-width: 1px;<br />border-style: solid;<br />border-color: #ccc #888 #555 #bbb;<br />margin: 0;<br />padding: 2px 3px;<br />}<br /><br />#menu h2 {<br />color: #fff;<br />background: #000;<br />text-transform: uppercase;<br />}<br /><br />#menu a {<br />color: #000;<br />background: #efefef;<br />text-decoration: none;<br />}<br /><br />#menu a:hover {<br />color: #a00;<br />background: #fff;<br />}</pre><br /><p>The CSS above removes the padding/margin and bullets from all the lists, sets the width of the the entire menu and styles the links and heading to suit.<br /></p><h2>Positioning the Pop Outs</h2><br /><pre>#menu li {<br />/* make the list elements a containing block for the nested lists */<br />position: relative;<br />}<br /><br />#menu ul ul ul {<br />position: absolute;<br />top: 0;<br />left: 100%; /* to position them to the right of their containing block */<br />width: 100%; /* width is based on the containing block */<br />}</pre>The <code>position: relative;</code> applied to the <code>#menu li</code> makes the <code><li></code> elements into containing blocks for the nested <code><ul></code> elements.<br /><p>We only want to apply positioning to third level nested lists and deeper so the <code>#menu ul ul ul</code> targets that and the popout is positioned over to the right edge of their containing block (parent <code><li></code> element)</p><br /><h3>Hiding and Revealing using <code>:hover</code></h3><br /><pre>div#menu ul ul ul,<br />div#menu ul ul li:hover ul ul<br />{display: none;}<br /><br />div#menu ul ul li:hover ul,<br />div#menu ul ul ul li:hover ul<br />{display: block;}</pre>This bit could be simplified with the use of child selectors, unfortunately we have to use more specific descendant selectors in order for IE to understand.<br /><p>This now <a title="View Results so far" href="http://www.tanfa.co.uk/css/examples/menu/vs5.asp">achieves what we want</a>, in a non-IE browser.</p><br /><h2>Fixing it for IE!</h2><br /><pre><!--[if IE]><br /><style type="text/css" media="screen"><br />body {<br />behavior: url(csshover.htc); /* call hover behaviour file */<br />font-size: 100%; /* enable IE to resize em fonts */<br />}<br />#menu ul li {<br />float: left; /* cure IE5.x "whitespace in lists" problem */<br />width: 100%;<br />}<br />#menu ul li a {<br />height: 1%; /* make links honour display: block; properly */<br />}<br /><br />#menu a, #menu h2 {<br />font: bold 0.7em/1.4em arial, helvetica, sans-serif;<br />/* if required use em's for IE as it won't resize pixels */<br />}<br /></style><br /><![endif]--><br /></pre>The above is the entire conditional CSS which we use to target IE/Windows only. It enables us to call the hover behaviour file and also to input some other IE "workaround" CSS without affecting other browsers.Providing the <code>csshover.htc</code> file has been saved to the same directory as the file you're working on you should see that the popouts are now appearing on hover as expected.Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-40090779376056276402008-05-24T03:55:00.000-07:002008-05-24T03:56:37.959-07:00XML and XSLT Basics<p>The Extensible Markup Language is a powerful tool for creating documents using structured information. Learn what XML is, how to use it, and about other languages created with it. </p><br /><br /><p><h4>Anatomy of an XML Document</h4><br /> XML documents have a very specific structure. It is something like a tree with branches off the trunk. Learn how an XML document is structured. </p><br /><p><h4>Attributes and XML</h4><br /> Attributes allow you to describe your XML elements. </p><br /><p><h4>The Difference Between CSS and XSLT</h4><br /> Not all style sheets are created equal. CSS and XSLT have two very different roles. </p><br /><p><h4>DTDs and Markup Languages</h4><br /> Learn what a DTD or Document Type Definition is and how you use them in XML and HTML documents. </p><br /><p><h4>Ecommerce Functions in XPath</h4><br /> XPath is a powerful tool for ecommerce, with many functions that help manage and manipulate the data. </p><br /><p><h4>Examining XML</h4><br /> XML is a very generic language, and as such, can be confusing to understand. However, once you understand some basic principles you can start creating XML documents that are well-formed and valid. </p><br /><p><h4>Form vs. Function - XML-like HTML Tags</h4><br /> There are several HTML tags that look a lot like XML. But what does that really mean? Learn about why some tags were deprecated in XHTML 1.0 and some specific tags that weren't. </p><br /><p><h4>How Should My XML Look?</h4><br /> XML doesn't define how a document should look when it's displayed. It's easy to use Cascading Style Sheets (CSS) to define how your XML documents should look. </p><br /><p><h4>How to Add RSS Feeds to a Web Site with Dreamweaver</h4><br /> Sometimes, it seems like the only way to get an RSS feed is to have a blog or to write the RSS by hand. But there is a Dreamweaver Extension you can use to build RSS feeds for your Web site. This extension will build feeds manually or take content from your existing Web pages to build the feed. </p><br /><p><h4>How to Syndicate this Site</h4><br /> The Web Design/HTML weblog is available for syndication. And with a simple script, it's easy to have this site and other RSS feeds right on your Web page. You can also use aggregators and newsreaders to read RSS feeds you're interested in. </p><br /><p><h4>Introduction to XPath</h4><br /> Learn the conventions for pointing to specific parts of your XML document. You should know XPath to work with both XSLT and XPointer. </p><br /><p><h4>Introduction to XSL</h4><br /> XSL is more than just transformations of XML documents, it allows you to define your presentations and provide specific maps of your documents. </p><br /><p><h4>Modularization of XHTML</h4><br /> XHTML has been broken up into modules to make it more extensible and allow it to be used on more diverse platforms. </p><br /><p><h4>Origin and Design Goals for XML</h4><br /> The ten design goals for XML and what they mean. </p><br /><p><h4>Privacy Policies and P3P</h4><br /> Use the Platform for Privacy Preferences Project (P3P) to create and use privacy policies on your Web site. And find out what browsers support this project. </p><br /><p><h4>Push Technology - XML In Action</h4><br /> It's easy to set up a Web site with push technology using the XML application CDF or Channel Definition Format. </p><br /><p><h4>Quirks Mode - Using the DOCTYPE Tag</h4><br /> If you don't use the DOCTYPE tag, your Web pages won't display in standards compliant ways and might result in some strange Web pages. </p><br /><p><h4>Rewriting the Web Design Site with Web Standards</h4><br /> It is possible to take a site that is completely non-standard HTML and convert it to XHTML. It also reduces the file size as well. </p><br /><p><h4>RSS - Really Simple Syndication</h4><br /> Really Simple Syndication or RDF Site Summary or Rich Site Summary, no matter what you think it stands for, RSS is the answer to Web site syndication. </p><br /><p><h4>What is the Semantic Web?</h4><br /> The Semantic Web was devised by Tim Berners-Lee as a way to make the Web into a giant database. With the current status of data on the Web, computers do not know what data they are displaying it. Instead, all that the markup language usually tells about a document is how to display it or structure it. The Semantic Web makes the data understandable to computers as well, so it can be cataloged and used more efficiently. </p><br /><p><h4>What is a Sitemap? </h4><br /> What is an XML sitemap and why should I use them on my site? XML sitemaps are a new schema and protocol accepted by Google, Microsoft, and Yahoo! to help assist search engines. Setting up a sitemap for your Web site allows search engines to more accurately review the files on your site, including their locations and relative importance to each other. </p><br /><p><h4>Simple Object Access Protocol</h4><br /> What is the Simple Object Access Protocol (SOAP) and how does it relate to XML, HTTP, and Web applications. </p><br /><p><h4>Tools to Read (Parse) Your XML</h4><br /> Many Web developers think that XML is just a new version of HTML that is viewed in Web browsers. Learn about XML parsers. </p><br /><p><h4>Top XML Books</h4><br /> XML is a huge topic to learn and understand, and these books offer both the beginner and the advanced programmer something to use. While there are many books on specific XML languages and specifications, these books are some of the best all-around XML information manuals. There are books for people who learn by example and for the more studious minded. </p><br /><p><h4>Using !DOCTYPE</h4><br /> If you don't define the DOCTYPE or document type definition, newer browsers (version 6+) will assume you didn't write your markup to a standard and provide some strange results. Learn how to write a DOCTYPE that says what you mean and means what you say. </p><br /><p><h4>VoiceXML</h4><br /> With VoiceXML you can not only display Web pages on phones, you can hear them over the phone. </p><br /><p><h4>Well Formed XML and HTML</h4><br /> When you write XML that can be ready by an XML parser, your XML is well formed. How does that relate to HTML and XHTML? </p><br /><p><h4>What are All Those "ML"s?</h4><br /> HTML is based off of SGML, and XHTML is based XML, but what do those letters mean? What exactly is a markup language? And how do they all relate? </p><br /><p><h4>What is a DTD?</h4><br /> The Document Type Definition or DTD is the basic building block of an XML document. Learn the parts of a DTD and how to write your own. </p><br /><p><h4>What is a Podcast?</h4><br /> There are many misconceptions about what a podcast is. This article will teach you what a podcast is, why it's called a podcast, and give you references to start your own podcast. </p><br /><p><h4>What is XHTML?</h4><br /> With the new standard for XHTML, there are lots of questions about the status of HTML and how it relates to this new proposal. </p><br /><p><h4>What is XML?</h4><br /> Extensible Markup Language is not an off-shoot of HTML, in fact, it is the creator of languages like HTML. Learn what it is and how it relates to HTML. </p><br /><p><h4>Who Needs Wires!</h4><br /> WML or Wireless Markup Language is an XML application that allows you to put your documents onto cell phones and other wireless devices. Cables and wires not required. </p><br /><p><h4>Who Uses XML?</h4><br /> XML might be the new big thing, but what are people <em>really</em> using it for? </p><br /><p><h4>Why Learn XML?</h4><br /> The Web development community is getting more and more complex. There are many more languages and protocols to learn, but why should you learn XML? The good news is, you don't need to, but XML does do things that HTML cannot. </p><br /><p><h4>Writing a Schema</h4><br /> If you're going to write an XML application, you should write a schema to describe your XML. Schemas are valid XML documents, so they are a bit easier to write than DTDs. </p><br /><p><h4>XForms</h4><br /> XForms allow you to create forms that work on many platforms, are accessible, and integrate directly with XML. </p><br /><p><h4>XHTML 2.0 - What is It?</h4><br /> XHTML 2.0 is the latest version of XHTML - it brings XHTML even closer to its XML origins and is no longer backwards compatible with older versions. </p><br /><p><h4>XLink</h4><br /> Using XLink, you can create more flexible links, anchors and more, than you can with HTML. The XML Linking Language is the solution for XML documents. </p><br /><p><h4>XML Books</h4><br /> There are many books available about XML. Find the one that is right for you. Three great books, one to learn XML, one reference manual, and one short pocket reference. Plus several others to help. </p><br /><p><h4>XML Conversions</h4><br /> Learn by example, how to take an XML document that is not well-formed and invalid and turn it into a well-formed and valid document. </p><br /><p><h4>XML Elements</h4><br /> Learn how to use the most basic building block of XML - the element. </p><br /><p><h4>XML Explained</h4><br /> The newest markup language can be pretty intimidating! </p><br /><p><h4>XML Namespaces</h4><br /> XML namespaces clarify XML documents and allow you to use elements and attributes using the same name. </p><br /><p><h4>XML Terms</h4><br /> An explanation of some of the more common XML jargon and what they mean. </p><br /><p><h4>XSL-FO - Extensible Stylesheet Language Formatting Objects</h4><br /> What is XSL:FO and how do you use it? Extensible Stylesheet Language: Formatting Objects is the way to make your XML look the way you want it, online or in print. </p><br /><p><h4>XSL: The Style of XML</h4><br /> Once you have XML, how do you get it displayed? XSL is the stylesheet language built to display XML. </p><br /><p><h4>XSLT: Advanced</h4><br /> Learn how to convert a more complicated XML document into HTML using eXtensible Style Sheet Language for Transformations. </p><br /><p><h4>XSLT - The Basics</h4><br /> XSLT is the style sheets language for transforming your XML into any other text based language, including HTML. This week, we'll learn how to do basic transformations. </p><br /><p><h4>XSLT: More Transformations</h4><br /> Learn some powerful tools for transforming your XML. XSLT elements give you the power to convert the XML into the format that you need. </p>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-73416956580619418522008-01-11T08:31:00.000-08:002008-02-27T02:09:37.835-08:00About CSS<strong><span style="color:#66ff99;">About CSS</span></strong><br /><br /><span style="color:#ffffff;">Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the “learning CSS” page. For background information on style sheets, see the Web style sheets page.<br /></span><br /></span>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-83603436518195230192007-12-13T22:17:00.000-08:002007-12-17T21:07:44.908-08:00XHTML DTD<h1><span style="color: rgb(51, 51, 51);font-family:verdana;font-size:100%;" ><span style="color: rgb(0, 204, 204);">DTD </span><br /></span></h1><p><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="color: rgb(255, 255, 255);">The purpose of a DTD (Document Type Definition) is to define the legal building blocks of an XML document. It defines the document structure with a list of legal elements and attributes.</span> </span></p><br /><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><strong><span style="color: rgb(102, 204, 204);">The 3 Document Type Definitions</span></strong><br /></span></span><ul><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >DTD specifies the syntax of a web page in SGML.<br /></span></li><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >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.<br /></span></li><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >XHTML is specified in an SGML document type definition or 'DTD'.<br /></span></li><li><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="color: rgb(255, 255, 255);">An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.</span><br /></span></li></ul><p><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><strong><span style="color: rgb(51, 204, 255);">There are currently 3 XHTML document types:</span></strong><br /></span></span></p><ul><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >STRICT</span></li><br /><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >TRANSITIONAL</span></li><br /><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >FRAMESET<br /></span></li></ul><p><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><span style="color: rgb(255, 255, 255);">The XHTML standard defines three Document Type Definitions.<br /><br />The most common is the XHTML Transitional.</span><span style="font-weight: bold;"></span></span></span></p><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><strong><span style="color: rgb(102, 204, 204);">Is Mandatory</span></strong><br /></span></span><p><span style="color: rgb(255, 255, 255);font-family:verdana;" >An XHTML document consists of three main parts:<br /></span></p><ul><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >the DOCTYPE<br /></span></li><li><span style="color: rgb(255, 255, 255);font-family:verdana;" >the Head<br /></span></li><li><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="color: rgb(255, 255, 255);">the Body</span><br /></span></li></ul><p><span style="color: rgb(51, 51, 51);font-family:verdana;" ></span></p><p><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><span style="font-weight: bold; color: rgb(255, 153, 0);">XHTML 1.0</span></span></span></p><p><span style="color: rgb(51, 51, 51);"><span style="font-family:verdana;"><span style="color: rgb(255, 255, 255);">specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.<br /></span></span></span></p><h2><span style="color: rgb(255, 153, 0);font-family:verdana;font-size:78%;" >XHTML 1.0 Strict</span></h2><h2><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="font-size:85%;"><span style="color: rgb(255, 255, 255);font-size:78%;" >Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.</span><br /></span></span></h2><h2><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="font-size:85%;"><span style="color: rgb(255, 153, 0);font-size:78%;" >XHTML 1.0 Transitional</span> </span></span></h2><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="font-size:85%;"><span style="color: rgb(255, 255, 255);">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.</span><br /><br /></span></span><h2><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="font-size:85%;"><span style="color: rgb(255, 153, 0);font-size:78%;" >XHTML 1.0 Frameset</span> </span></span></h2><span style="color: rgb(51, 51, 51);font-family:verdana;" ><span style="color: rgb(255, 255, 255);font-size:85%;" >Use this when you want to use HTML Frames to partition the browser window into two or more frames.</span> </span><p><a href="http://learn-xhtml.blogspot.com/2006/11/what-is-xhtml.html"><span style="color: rgb(255, 204, 102);font-family:verdana;" >What is XHTML</span></a><span style="color: rgb(255, 204, 102);font-family:verdana;" ><br /></span></p><p><a href="http://learn-xhtml.blogspot.com/2006/12/benefits-of-xhtml.html"><span style="color: rgb(255, 204, 102);font-family:verdana;" >Benefits of XHTML</span></a><span style="color: rgb(255, 204, 102);font-family:verdana;" ><br /></span></p><p><a href="http://learn-xhtml.blogspot.com/2006/12/differences-between-xhtml-html-and-xml.html"><span style="color: rgb(255, 204, 102);font-family:verdana;" >Difference between XHTML, HTML and XML</span></a><span style="color: rgb(51, 51, 51);font-family:verdana;" > </span></p>Ishu Shahhttp://www.blogger.com/profile/04639702834185254651noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-87138307073830658262007-12-09T08:12:00.000-08:002007-12-09T08:14:46.590-08:00Free XHTML Tutorials for Web Designers & Developers.<strong>Free XHTML Tutorials for Web Designers & Developers.</strong><br /><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmltutorialssyntax.html" target="_blank">XHTML Sytax Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmldtdsdocumentdefinitions.html" target="_blank">XHTML Document Type Definitions (DTD) Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmltagstutorials.html" target="_blank">XHTML Tags Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmlattributestutorials.html" target="_blank">XHTML Attributes Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmltablestutorials.html" target="_blank">XHTML Tables Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmllinkslinkingtutorials.html" target="_blank">XHTML Links / Linking Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmlmodulestutorials.html" target="_blank">XHTML Modules Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmlconversionstips.html" target="_blank">XHTML Converting to HTML Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmlvalidationtutorials.html" target="_blank">XHTML Validation Tutorials</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmlforumsmessageboards.html" target="_blank">XHTML Forums / Message Boards</a><br /><a href="http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/xhtmlcodingtutorials/xhtmleditors/downloadseditors.html" target="_blank">XHTML Code Editors Software Downloads </a>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-26885784010265921662007-12-01T03:38:00.000-08:002007-12-01T03:43:07.283-08:00<span style="font-family:verdana;"><strong><span style="color:#33cc00;">What is XML?</span></strong><br /><br /></span><span style="font-family:verdana;color:#ffffff;">The full form is XML™ is Extensible Markup Language.<br />XML was conceived as a means of regaining the power and flexibility of SGML without most of its complexity. Although a restricted form of SGML, XML nonetheless preserves most of SGML's power and richness, and yet still retains all of SGML's commonly used features.<br />While retaining these beneficial features, XML removes many of the more complex features of SGML that make the authoring and design of suitable software both difficult and costly.</span>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-1165309473684279252006-12-05T01:03:00.000-08:002006-12-05T01:20:35.970-08:00Differences Between XHTML, HTML, and XML<span style="font-family:verdana;font-size:100%;"><span style="color:#ffffff;">XHTML is HTML 4.0 Written in XML Format<br />On January 26, 2000, the W3C announced that HTML 4 has been reformulated into XHTML 1.0. XHTML is HTML 4 written as an XML application.<br /><br />There are two primary parts to XHTML:<br /><br /></span><span style="color:#ffffff;"><strong>HTML 4<br /></strong>HTML 4 is a markup language used for displaying text and documents across different platforms and machines. It was originally intended for a very specific audience, and has expanded to include hypertext, multimedia, as well as the style of the documents displayed.<br /><br /></span><span style="color:#ffffff;"><strong>XML<br /></strong>XML is an extensible markup language that was developed to retain the flexibility and power of HTML while reducing most of the complexity.<br /><br />XHTML combines the flexibility of HTML with the extensibility of XML. </span></span>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com1tag:blogger.com,1999:blog-37835357.post-1165309160127162042006-12-05T00:57:00.000-08:002008-02-27T02:06:26.567-08:00Benefits of XHTML<span style="font-family:verdana;color:#000000;"><span style="color:#ffff66;">A painless transition to more advanced technology</span><br /><br /><span style="color:#ffffff;">The web is moving to </span></span><span style="font-family:verdana;color:#ffffff;">XML</span><span style="font-family:verdana;color:#ffffff;">, a powerfully enabling technology. Writing well–formed, valid XHTML pages is the easiest way to begin this transition. All it takes is learning a few </span><span style="font-family:verdana;color:#ffffff;">simple rules</span><span style="font-family:verdana;color:#000000;"><span style="color:#ffffff;"> of XHTML markup.<br /></span><strong><span style="color:#99ffff;">Cleaner, more logical markup</span><br /></strong><span style="color:#ffffff;">XHTML brings uniformity to document structure. The rules of XHTML help restore the structural integrity of documents that was lost during the web’s rapid commercial expansion between 1994 and 2001. This is critical for large organizations such as ours, whose web pages must interface with logically–marked–up documents in legacy systems and databases.<br /></span><br /><span style="color:#99ffff;"><strong>Increased interoperability </strong><br /></span><span style="color:#ffffff;">Unlike old–style HTML pages, valid, well–formed XHTML documents can easily be “transported” to wireless devices, Braille readers and other specialized web environments. Moreover, XHTML’s insistence on clean, rule–based markup helps us avoid the kind of errors that can make web pages fail even in traditional browsers like Microsoft Internet Explorer, Netscape Navigator, and Opera Software’s Opera browser.</span><br /><br /><strong><span style="color:#33ffff;">Greater accessibility<br /></span></strong><span style="color:#ffffff;">Because they follow strict rules and avoid non–standard markup, well–authored XHTML pages are more accessible than old–school HTML pages, helping the library comply with </span></span><span style="font-family:verdana;color:#ffffff;">U.S. laws</span><span style="font-family:verdana;color:#ffffff;"> and </span><span style="font-family:verdana;color:#ffffff;">accessibility guidelines</span><span style="font-family:verdana;color:#000000;"><span style="color:#ffffff;">.</span> </span>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com0tag:blogger.com,1999:blog-37835357.post-1164881342894059272006-11-30T02:08:00.000-08:002008-02-26T23:26:31.482-08:00What is XHTML ?<span style="color: rgb(255, 255, 255);font-family:verdana;" >XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >HTML4</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents. The details of this family and its evolution are discussed in more detail in [</span><<span style="color: rgb(255, 255, 255);font-family:verdana;" >XHTMLMOD</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >].<br />XHTML 1.0 (this specification) is the first document type in the XHTML family. It is a reformulation of the three HTML 4 document types as applications of XML 1.0 [</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >XML</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >]. It is intended to be used as a language for content that is both XML-conforming and, if some simple </span><span style="color: rgb(255, 255, 255);font-family:verdana;" >guidelines</span><span style="color: rgb(255, 255, 255);font-family:verdana;" > are followed, operates in HTML 4 conforming user agents. Developers who migrate their content to XHTML 1.0 will realize the following benefits:<br />XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools.<br />XHTML documents can be written to operate as well or better than they did before in existing HTML 4-conforming user agents as well as in new, XHTML 1.0 conforming user agents.<br />XHTML documents can utilize applications (e.g. scripts and applets) that rely upon either the HTML Document Object Model or the XML Document Object Model [</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >DOM</span><span style="color: rgb(255, 255, 255);font-family:verdana;" >].<br />As the XHTML family evolves, documents conforming to XHTML 1.0 will be more likely to interoperate within and among various XHTML environments.<br />The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content's backward and future compatibility. </span>Naveen Arorahttp://www.blogger.com/profile/00848554988642584324noreply@blogger.com1