|Published (Last):||8 January 2013|
|PDF File Size:||12.81 Mb|
|ePub File Size:||6.37 Mb|
|Price:||Free* [*Free Regsitration Required]|
This title contains over pages of DHTML techniques that enrich the user experience without sacrificing usability or standards-compliance.
Build your own standards-compliant hierarchical navigation menu; create animated tooltips; validate form data using regular expressions and give dynamic feedback to your users; construct an AJAX signup form that can let the user know if their chosen username is already taken, without their having to submit the form itself.
These first four chapters should give you dhtjl taste of the action. As always, you can download this excerpt as a PDF if you prefer. And now, to Chapter 1.
If you already know all these details, you might want to flick through the chapter anyway; you may even be a little surprised by some of it. Mixing these technologies together can result in a humble stew or a grandiose buffet. Websites are written in HTML.
BookNomads: DHTML Utopia
These needs may necessitate a shift away from your previous experiences writing HTML. They may also require a different approach than having your preferred tools write HTML for you. HTML that complies with these rules is said to be “valid. While the set of rules is pretty complex, you can ensure that your HTML is valid by following a few simple guidelines. For now, simply remember that if you cross your tags, each browser will interpret your code in a different way, according to different rules rather than according to the standard.
Any hope of your being able to control the appearance and functionality of your pages across browsers goes right out the window unless you do this right. That information can be typed on a single line, or with a line break after EN”.
I visit that article all the time to cut and paste the one I need! The most important page creation step is to check that your HTML is valid. As mentioned above, browsers rely on a standard that describes how validated HTML should be interpreted.
However, there are no standards to describe how invalid HTML should be interpreted; each browser maker has established their own rules to fill that gap. Trying to understand each of these rules would be difficult and laborious, and you have better things to do with your time.
Sticking to valid HTML means that any problems you find are deemed to be bugs in that browser — bugs that you may be able to work around. Thus, using valid HTML gives you more time to spend with your family, play snooker, etc.
In addition to its validity, your HTML should be semantic, not presentational. What this means is that you hdtml use HTML tags to describe the nature of an element in your document, rather than the appearance of that element.
This approach is utoopia semantic markup — a fancy way of saying, “uses tags to describe meaning.
First, imagine your Website has a list of links to different sections. That list should be marked up on the basis of what it is: It dbtml look something like this:. Many of the items within a Website are really lists: Similarly, if your list contains items with which comments are associated, maybe it should be marked up as a definition list:.
The important part is that the information in the page is marked up in dht,l way that describes what it is. In essence, it allows you to state how you want each element on your page to look. An element is a piece of HTML that represents one thing: Elements usually correspond to a particular tag and its content.
If you want to look good, you need to learn how to dress up and go to the gym regularly!
You utopiq specify that in your style sheet as follows:. The key point here is to remove the presentation aspects from your HTML and put them into your style sheet.
This makes your job as Website developer much easier. Although the full definition ytopia CSS allows you to do some fairly amazing things, and to control the presentation of your pages to a high degree, utopix every browser supports everything that CSS has to offer. Dytml are two sorts of browser incompatibilities: Missing implementations are relatively easy to deal with: This can be a pain, especially since the most commonly used browser in the world, Internet Explorer for Windows, has some serious holes in its CSS support; however, this “solution” is often a necessary compromise.
Badly implemented standards are a bigger problem. In such cases, the browser gets it wrong. Another step to CSS guru-hood is understanding exactly what each browser does wrong, and how you can work around those failings.
A huge variety of these CSS hacks is documented for each browser in various places around the Web; utopis the section called “Further Reading” for more. While it can be a lot of work, many CSS bugs only become apparent with the complex use of this technology; most CSS is handled perfectly across platforms and browsers without the need for hacks or complex tests. The capabilities of CSS increase all the time, and more “interactive” features are constantly being added to the CSS specification.
The first function does the work of converting the text. The second function makes sure that the first is connected to the right HTML tag. The final line performs this connection once the page has loaded in full. Although this means more code, notice how it keeps the HTML content clean and simple.
By version 4, the two browsers had diverged significantly in terms of their respective feature sets and the access they provided to page content.
Each browser manufacturer implemented its own proprietary means of providing scripting access to layers. Scripts dhtjl wanted to work in both browsers needed to contain code for each method.
The ill-fated “browser wars” were all about these proprietary extensions to the Web, as each manufacturer strove to attract more developers to its platform through the utopai of new features. There was little regard for cross-browser compatibility, although Microsoft copied and supported most of the early innovations made by Netscape.
While all this was taking place, the W3C developed a specification for the Document Object Model Level 1, which outlined a generic and standard method to access the various parts of an XML document using script.
Both major browser manufacturers implemented the DOM Level 1 specification: The previously existing proprietary specifications were retrospectively titled; since the new standard was DOM Level 1, those old and now deprecated methods were called DOM Level 0.
Each element becomes an element node, and each bit of text becomes a text node. Take this HTML snippet, for example:. I added lots of extra indenting so that you can compare this snippet with the matching DOM tree. The matching DOM tree is shown in Figure 2. As you can see, the a element, which is located inside the p element in the HTML, becomes a child nodeor just childof the p node in the DOM tree. Symmetrically, the p node is the parent of the a node.
The two li nodes, children of the same parent, are called sibling nodes or just siblings. Notice that the nesting level of each tag in the HTML markup matches the number of lines it takes to reach the same item in the DOM tree. From this last example, we can see more clearly why valid HTML, including properly nested elements, is important.
If elements are improperly nested, problems arise. Take the following line:. Each browser fixes malformed content in a different way, which can generate such horrors as an element that is its own parent node.
Keeping your HTML valid avoids all these problems. Trees of nodes turn up a lot in computing, because, among other things, they have a very useful property: Walking a tree is easy because any element node can be considered as the top of its own little tree.
Therefore, to walk through a tree, you can use a series of steps, for example:. This process is known as recursionand is defined as the use of a function that calls itself. Each child is the same type of thing as the parent and can therefore be handled in the same way.
In order to walk the DOM tree, you need a reference to the node at its top: