Why indeed? Wouldn't something like &br; be more appropriate?

An HTML entity reference is, depending on HTML version either an SGML entity or an XML entity (HTML inherits entities from the underlying technology). Entities are a way of inserting chunks of content defined elsewhere into the document.

All HTML entities are single-character entities, and are hence basically the same as character references (technically they are different to character references, but as there are no multi-character entities defined, the distinction has no impact on HTML).

When an HTML processor sees, for example — it replaces it with the content of that entity reference with the appropriate entity, based on the section in the DTD that says:

<!ENTITY mdash   CDATA "&#8212;" -- em dash, U+2014 ISOpub -->

So it replaces the entity reference with the entity — which is in turn a character reference that gets replaced by the character — (U+2014). In reality unless you are doing this with a general-purpose XML or SGML processor that doesn't understand HTML directly, this will really be done in one step.

Now, what would we replace your hypothetical &br; with to cause a line-break to happen? We can't do so with a newline character, or even the lesser known U+2028 LINE SEPARATOR (which semantically in plain text has the same meaning as <br/> in HTML), because they are whitespace characters which are not significant in most HTML code, which is something that you should be grateful for as writing HTML would be much harder if we couldn't format for readability within the source code.

What we need is not an entity, but a way to indicate semantically that the rendered content contains a line-break at this point. We also need to not indicate anything else (we can already indicate a line-break by beginning or ending a block element, but that's not what we want). The only reasonable way to do so is to have an element that means exactly that, and so we have the <br/> element, with its related tag being put into the source code.

I am teaching a web development course at a CS department, I wrote most of the final test by now, each question focus on a specific feature or a specific technology,

I wonder if you can think of/recommend a question that combine the knowledge of few technologies..

The course mostly covers: HTML, CSS, JS, HTTP, Servlets, JSP and JDBC. (as well as AJAX, ORM, basic security issues like SQL-Injection and XSS, HTML5, REST APIs)

EDIT: I will super appreciate questions with answers :-) thanks!

I'll give the bounty to the question with the highest rank, so please vote! I honestly like most of the questions here, thank you all :-)

Explain the relationship of the DOM to each of the following technologies: HTML, CSS, JavaScript.

The goal here is for the answer to make clear the student understands that HTML generates a DOM structure, CSS affects how that structure is rendered, and JavaScript affects how that structure is modified. If you understand how it all ties back into the DOM, all client-side coding becomes straightforward.

It looks like Websockets in HTML 5 will become a new standard for server push.

Does that mean the server push hack called Comet will be obsolete?

Is there a reason why I should learn how to implement comet when Websockets soon (1-2 years) will be available in all major browsers?

Then I could just use beaconpush or pusher instead till then right?

Does that mean the server push hack called Comet will be obsolete?

WebSockets are capable of replacing Comet, AJAX, Long Polling, and all the hacks to workaround the problem when web browsers could not open a simple socket for bi-directional communications with the server.

Is there a reason why I should learn how to implement comet when WebSockets soon will be available in all major browsers?

It depends what "soon" means to you. No version of Internet Explorer (pre IE 9) supports the WebSockets API yet, for example.

---

UPDATE:

This was not intended to be an exhaustive answer. Check out the other answers, and @jvenema's in particular, for further insight into this topic.

I have been looking at a HTML 5 boilerplate template (from http://html5boilerplate.com/) and noticed the use of "?v=1" in URLs when referring to CSS and Javascript files.

1. What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?
2. Not all Javascript URLs have the "?v=1" (example from the sample below: js/modernizr-1.5.min.js). Is there a reason why this is the case?

Sample from their index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Thanks in advance.

These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:

/Resources/Combined.css?v=x.x.x.buildnumber

Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.

Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.

The symbol for the Indian currency was approved by the Union Cabinet on 15 July 2010.

WebRupee is a web API for the Indian currency symbol. It provides a simple, cross browser method for using the Rupee symbol on your webpage, blog or anywhere on the web.

Here is method to print Indian Currency symbol

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
    <script src=http://cdn.webrupee.com/js type=”text/javascript”></script>
</head>
<body>
    Rupee Symbol: <span class="WebRupee">Rs.</span> 200

This means if somebody copies text from your site and pastes it somewhere he will see Rs. and not some other or blank character.

You can now also use the new Rupee unicode symbol - U+20B9 ₹ INDIAN RUPEE SIGN. It can be used in this manner

<span class="WebRupee">&#x20B9;</span> 500

Just include the following script and it will update all the "Rs" / "Rs." for you

<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>

WebRupee is a web api for the symbol of Indian currency. WebRupee API provides a simple, cross browser method for using the Rupee symbol on your webpage, blog or anywhere on the web.

here is method to print Indian Currency symbol

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
    <script src=http://cdn.webrupee.com/js type=”text/javascript”></script>
</head>
<body>
    Rupee Symbol :<span class="WebRupee">Rs.</span> 200

Well that means if somebody copies text from your site and pastes it somewhere he will see Rs. and not some other or blank character.

below is another method You can now also use the new rupee symbol position U+20B9 ₹ INDIAN RUPEE SIGN accepted by Unicode, just write it in the following way:

<span class="WebRupee">&#x20B9;</span> 500
</body>
</html>

Note: Just include the following javascript and it will update all the " Rs " / " Rs. " for you

<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>

for more information click here Web rupee

We're building an app, our first using Rails 3, and we're having to build I18n in from the outset. Being perfectionists, we want real typography to be used in our views: dashes, curled quotes, ellipses et al.

This means in our locales/xx.yml files we have two choices:

1. Use real UTF-8 characters inline. Should work, but hard to type, and scares me due to the amount of software which still does naughty things to unicode.
2. Use HTML character entities (’ — etc). Easier to type, and probably more compatible with misbehaving software.

I'd rather take the second option, however the auto-escaping in Rails 3 makes this problematic, as the ampersands in the YAML get auto-converted into character entities themselves, resulting in 'visible' &8217;s in the browser.

Obviously this can be worked around by using raw on strings, i.e.:

raw t('views.signup.organisation_details')

But we're not happy going down the route of globally raw-ing every time we t something as it leaves us open to making an error and producing an XSS hole.

We could selectively raw strings which we know contain character entities, but this would be hard to scale, and just feels wrong - besides, a string which contains an entity in one language may not in another.

Any suggestions on a clever rails-y way to fix this? Or are we doomed to crap typography, xss holes, hours of wasted effort or all thre?

There is a ticket in lighthouse for this problem, and the resolution is to append _html to the i18n key in the locales/xx.yml file and use the t alias¹ to denote an html_safe string. For example:

en:
  hello: "This is a string with an accent: ó"

becomes:

en:
  hello_html: "This is a string with an accent: ó"

And it would create the following output:

This is a string with an accent: ó

This would prevent you from having to write raw t('views.signup.organisation_details') and would result in a cleaner output of: t('views.signup.organisation_details_html'). And while exchanging raw for _html doesn't seem like the greatest of trades, it does make things clear that you're outputting what is assumed to be an html_safe string.

---

¹ I've tested the code suggested in the lighthouse ticket. What I found was that you had to specifically use the t alias. If you used I18n.t or I18n.translate the translation didn't treat _html as html_safe:

I18n.t('hello_html') 
I18n.translate('hello_html') 
# Produces => "This is a string with an accent: ó"

t('hello_html')      
# Produces => "This is a string with an accent: ó"

I don't think this is the intended behavior per the RoR TranslationHelper documentation.

It turns out the following which looks like valid javascript, is not:

<html> 
<body>
<script>
 json = {test: "</script><script>alert('hello');</script>"};
</script>
</body>
</html>

The same text, when returned JSON via an ajax api works just as expected. However when rendered in-line results in a basic XSS issues.

Given an arbitrary correct JSON string, what do I need to do server side to make it safe for in-line rendering?

EDIT Ideally I would like the fix to work with the following string as well:

json = {test: "<\/script><script>alert('hello');<\/script>"};

Meaning, I have no idea how my underlying library is encoding the / char, it may have chosen to encode it, or it may have not. (so its likely a regex fix is more robust)

To start with, this is not JSON at all, it's a Javascript object. JSON is a text format that is based on the Javascript syntax.

You can either make sure that the code doesn't contain the </ character combination:

var obj = { test: "<"+"/script><script>alert(\"hello\");<"+"/script>" };

Or if you are using XHTML you can make sure that the content in the script tag is interpreted as plain data:

<script type="text/javascript">
//<![CDATA[
var obj = { test: "</script><script>alert(\"hello\");</script>" };
//]]>
</script>

I understand what the "href" attribute in the anchor tag (<a />) is for, but what does the "h" stand for?

HREF stands for "Hypertext Reference".

Source: http://www.w3.org/Provider/ServerWriter.html

My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.

JQuery can be used if this cannot be done in pure CSS.

The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.

The ration between the top half and bottom half is always 50% 50% independent of browser resolution.

I would also like if both the top and bottom parts are fixed.

In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.

It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)

Is this possible with just CSS? How would you do it?

If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid? I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.

Edit 1

Oh yeah, I have a WIP too: http://meyers.ipalaces.org/extra/

It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.

I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.

Edit 2

How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart

Edit 3

I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.

I have successfully came up with 2 ways to do this:

Method 1

Click here to view demo

Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.

This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...

---

Method 2

Click here to view demo

Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)

Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.

Problems

• CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
• Creates excessive lag in all current Internet Explorers

If you have a really really large JPG and a BMP embedded on HTML and you load it into Firefox, you will notice that the JPG will load "downwards" (paint from left to right, then down) and the BMP will load "upwards" (paint from right to left, then up).

Just curious. :)

I wrote a bitmap parser a while back, and if I remember correctly, bitmaps store the image backwards. That is, it stores the lower rows first and the higher rows last. The data arrives to your browser in-order, so that's why you can watch it load from the bottom up.

EDIT: Here's a better link that pretty much tells you everything you would ever want to know about a bitmap file: http://en.wikipedia.org/wiki/BMP_file_format

Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.

I have one slight problem, not a big deal but still a little annoying. I have:

<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal

Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!

Here is my css:

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}

Thanks in advance.

I believe you are looking for this in your CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

I have seen both ways, both implementation work just the structures are a bit different. In your experience, which work better and why?

I would answer this with multiple options actually, the some of which actually render in the body.

• Place library script such as the jQuery library in the head section.
• Place normal script in the head unless it becomes a performance/page load issue.
• Place script associated with includes, within and at the end of that include. One example of this is .ascx user controls in asp.net pages - place the script at the end of that markup.
• Place script that impacts the render of the page at the end of the body (before the body closure).
• do NOT place script in the markup such as - better to put it in event handlers in your script body instead.
• If you cannot decide, put it in the head until you have a reason not to such as page blocking issues.

footnote: "When you need it and not prior" applies to the last item when page blocking (perceptual loading speed) - the users perception IS thier reality, if it is percieved to load faster, it does load faster (even though stuff might still be occuring in code).

EDIT: references:

• asp.net discussion: http://west-wind.com/weblog/posts/154797.aspx and here: http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx
• jQuery document ready discussion: http://encosia.com/2010/08/18/dont-let-jquerys-document-ready-slow-you-down/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Encosia+%28Encosia%29
• the other answers on this question present valid information as well.
• use www.google.com and www.bing.com to search for related information (there are a lot of references)

Side note: IF you place script blocks within markup, it may effect layout in certian browsers by taking up space (ie7 and opera 9.2 are known to have this issue) so place them in a hidden div (use a css class like: .hide { display: none; visibility: hidden; } on the div)

Standards: Note that the standards allow placement of the script blocks virtually anywhere if that is in question: http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html and http://www.w3.org/TR/xhtml11/xhtml11_dtd.html

EDIT2: Note that whenever possible (always?) you should put the actual Javascript in external files and reference those - this does not change the pertinent sequence validity.

I was going through a website I've taken over and came across this section in one of the pages:

<a href="javascript:window.location='<%=GetSignOutUrl()%>';">
  // img
</a>

Apparently anyone who has ever used the site without javascript would not be able to log out properly (surprisingly enough, this has never come up).

So the first thing that comes to mind is

<a href="<%=GetSignOutUrl()" onclick="javascript:window.location='<%=GetSignOutUrl()%>';">
   // img
</a>

Then I realized I don't know why I'm keeping the javascript call around at all. I'm just a little confused as to why it would have been written like that in the first place when a regular link would have worked just fine. What benefit does window.location have over just a regular link?

This is also the only place in the website I've seen something like this done (so far).

Edit: The programmer before me was highly competent, which is actually why I was wondering if there was something I wasn't taking into account or if he just made a simple oversight.

There are three possibilites:

1. The developer was trying to enforce Javascript use before sending the user along.
2. The developer was trying to mask the href in the link. Perhaps this was so it wouldn't be crawled effectively, or the status bar had something to do with it.
3. The developer was a non-conformist.

I would remove it and see if it breaks. But then again, I'm a conformist.

1. How do you capture user input related to mathematical fractions. Assuming I would like to present a simple square and ask the user to select 3/4ths of a square. What kind of UI control should we use to first all represent a square (with 4 equal blocks inside) and to have a mechanism to capture user input.

2. Assuming you would like to draw a scale which is 1 meter long and and you have markings for every 10 cm (e.g. 10, 20, 30 ...90, 100). We would like the user to plot 40 cm on the scale. What kind of UI controls are available which will help us in drawing such inputs and capturing student response.

Are there any tools or libraries which we can use to build such solutions? Our environment is based on (java, richfaces, jquery ...)

While it is possible to hack together HTML or jQuery controls to draw and detect clicks on rectangles, if you are going to draw your own graphics with fonts, symbols, scale and rotation, you are eventually going to have to move to a graphics API. I suggest using the HTML5 Canvas element.

Canvas is the W3C-approved method for adding interactive graphics to web pages and is supported by all modern browsers, including IE with a plug-in.

A free chapter from Dive into HTML5 shows how to create a playable HTML5 game using only JavaScript in a Canvas element.

I now develop websites and XML interfaces since 7 years, and never, ever came in a situation, where it was really necessary to use the > for a >. All disambiguition could so far be handled by quoting <, &, " and ' alone.

Has anyone ever been in a situation (related to, e.g., SGML processing, browser issues, XSLT, ...) where you found it indespensable to escape the greater-than sign with >?

Update: I just checked with the XML spec, where it says, for example, about character data in section 2.4:

Character Data

[14]      CharData       ::=      [^<&]* - ([^<&]* ']]>' [^<&]*)

So even there, the > isn't mentioned as something special, except from the ending sequence of a CDATA section.

This one single case, where the > is of any significance, would be the ending of a CDATA section, ]]>, but then again, if you'd quote it, the quote (i.e., the literal string ]]>) would land literally in the output (since it's CDATA).

You don't need to absolutely because almost any XML interpreter will understand what you mean. But still you use a special character without any protection if you do so.

XML is all about semantic, and this is not really semantic compliant.

About your update, you forgot this part :

The right angle bracket (>) may be represented using the string " > ", and must, for compatibility, be escaped using either " > " or a character reference when it appears in the string " ]]> " in content, when that string is not marking the end of a CDATA section.

The use case given in the documentation is more about something like this :

<xmlmarkup>
]]>
</xmlmarkup>

Here the ]]> part could be a problem with old SGML parsers, so it must be escaped into = ]]> for compatibilities reasons.

I'm always looking for a modern Java library that makes creating valid (X)HTML snippets easy.

Yes you could use a templating language but there are times when you do not want to do this because Java has some advantages over insert your favorite templating language.

I have seen lots of in-house HTML builders in many projects but there is no Commons-HTML Builder that I can find.

Does anyone know of one?

It would be ideal if it took advantage of the Java 5/6/7 type system (generics) and support Fluent Style. Or something like fluent style ie JQuery style chaining, or a state machine used in mocking libraries like JMock (pedantically speaking a Monad).

A rough builder example might be:

new Html().title("stuff").body().in().div().in().h1("Hello World").hr();

Another example: http://codemonkeyism.com/the-best-markup-builder-i-could-build-in-java/

I ended up writing my own: Java Anti-template Language (JATL)

I ended up writing my own library called Java Anti-template Language (JATL)

I recently needed to append some data to dynamically created LI elements. In my first instance, I used .data() in a way like

var _newli = $('<li>foobar</li>');
_newli.data('base', 'ball');
// append _newli to an `ul`

that.. was terribly slow. This logic happens in a loop which can easily grow up to 500+ items, it took ages! Sometimes it even broke the javascript execution time frame.

So I changed to $.data(). Somehow, attaching data to an object with that is like 8x faster than doing it over the .data() method call. So now it looked like

var _newli = $('<li>foobar</li>');
$.data(_newli[0], 'base', 'ball');
// append _newli to an `ul`

That was/is indeed faster, but still it took like 3-4 seconds(!) to build up all my elements (In my real code there are like 6 calls to $.data per element).

So I was really stuck with that, I asked myself why the heck to use .data() or $.data() anyway? I could just attach my data to the DOM object. So I did

var _newli = $('<li>foobar</li>');
_newli[0].base = 'ball';
// append _newli to an `ul`

Voila, wow to my shock, that was incredibly fast! I couldn't believe that this ran so good without any disadvantage. So that is what is my question all about actually. I didn't find any disadvantage for this technique so far on the net. There are reads about circular references you can create using this way, but AFAIK "only" on IE's and only if you refer to objects.

Any thoughts experts ?

update

Thanks for the good comments and postings guys. Short update @patrick dw:

You are right, I was passing the underlaying DOM element when using $.data(). It does not even work with jQuery objects, at least not as expected. The idea about using one object and pass it through $.date() I had myself, but then again I was so shocked about the performance difference I decided just to ignore the .data() method like forever.

You are correct about circular references, that isn't an issue outside of IE, and in IE it only becomes an issue when JavaScript has a reference to a DOM object, and a JS object is assigned to one of the DOM object's properties. I believe this can be resolved by simply by nullifying any references in JS to the DOM object.

The $().data() method is an overly complicated wrapper for $.data() (see jQuery.fn.data: http://github.com/jquery/jquery/blob/master/src/data.js#L126, which in turn calls jQuery.data: http://github.com/jquery/jquery/blob/master/src/data.js#L20), so cutting out that middle man will save a non trivial amount of time, especially if it's to be done 500 times.

In this case, the $().data('foo', 'bar') method doesn't do much more than el.foo = 'bar'. Do what's fastest.

I just learned about XLST on stackoverflow today (I love how in computers you can program for years and constantly have 'darn, how did I not know about that technology' moments). I'm wondering how popular XLST it is for web development? I've worked on a few websites (using php, ruby, and asp.net mvc) but I'm not a web developer by any means.

Is the reason each web language I listed above has it's own way of marking up html (and thus taking advantage of 'templates') just to make it simpler (simpler as in more to the point and not and more geared to one specific purpose) in that you don't have to first convert what you want to display to xml and then to html? Or are there other reasons why XLST doesn't seem too popular for web development? Or am I just crazy (again most of my work is with Desktop apps) and actually it is widely used in webpages? If not in development, what do you mainly use it for?

It seems that being able to easily serialize objects in xml with C# would make XLST a very popular way of displaying object in HTML on websites?

Thanks for feeding my curiosity!!

IMHO there are two main reasons why XSLT is not very popular:

• it's generally hard.
• you can just skip it and directly write HTML, and HTML is not hard and has first-class support from all web frameworks.

In summary, there is usually not enough reason to introduce yet-another-abstraction. Abstractions are not free, they solve some problems but introduce others (i.e. the "solve it by adding another layer of indirection" adagio), so the benefits must clearly outweight the costs.

That said, there are XSLT-based solutions for many web frameworks, e.g.:

• ASP.NET MVC XSLT view engine
• libxslt in RoR

Here's an excellent article that discusses XSLT for view engines.

Ajax - Asynchronous JavaScript And XML

What does it include? HTML, JavaScript, XML, jQuery?

What is the best way to start learning Ajax? Should I start from the basics of HTML and JavaScript or base my instruction on a particular language or library?

Ajax is, in short, the process of communicating with a webserver from a page, using JavaScript, without leaving the page.

The key things you need to know for this are:

• The JavaScript needed to make the request and handle the response
• The server side code needed to receive the request and make the response (unless you are using a service that provides this for you)

The server side of this depends very much on what server side environment you are working with, so there is little useful that is specific that could be said. What can be usually said are what form the responses can take.

• JSON is a popular approach for sending structured data
• XML is another way to send structured data, but has been falling out of favour of late since JSON is, arguably, easier to work with.
• Chunks of HTML are popular for shoving into pages with innerHTML
• Tiny bits of plain text are useful for simple responses

As for the client side, there are two common approaches.

• XMLHttpRequest, which is powerful, but limited to requests to the current domain by the same origin police
• JSON-P, a cross-domain method that works by loading a script from the third party that calls a function defined by the first party with all the data in an argument to the call.

Now for some resources:

• Opera provides a good guide to JavaScript and other web standards if you need some background.
• Jim Ley has a reasonable introduction to the XMLHttpRequest object
• Ajaxian has an introduction to JSON-P
• YUI has a module for making XHR and JSON-P requests easier, as does jQuery.

I have the option of validating XHTML 1.1 documents against the official XHTML 1.1 DTDs (I use the plural because the "main" DTD actually includes several others) or against the official XHTML 1.1 XML Schemas.

Now I know that the XML Schema language is more expressive and powerful and can therefore check for more things. What I'm wondering is whether these "extra" features are actually in use in the official schemas. To put it differently, will validating against these schemas check for more things than validating against these DTDs?

It's a requirement that anything that validates using the DTD should also validate using the schema.

The conformance definition states that

The document MUST conform to the constraints expressed in Appendix C.

and Appendix C contains the DTDs. Nothing is said about conforming to the schemas which are in Appendix D. Therefore, any extra constraints from the schemas would not be binding, since documents only need to satisfy the DTDs.

(Edited)