Web Design Topic
Welcome to the beta of the new saila.com. Send in your bugs.
HTML
Hypertext mark-up language is the basic foundation used to build all Web pages. HTML 4.01 is the current recommendation, and was approved on December 18, 1997. HTML 5 is currently in development. Included in the specification is support for CSS, XML, and JavaScript/ECMA Script.
-
What’s the object?
The W3C concludes its two-part series on how to embed multimedia into HTML documents, and asks the Web standards community to help them QA browsers. The timing is just about perfect for this because as most reading this are no doubt aware: -
The W3C’s XHTML FAQ
Ever wonder: what’s the deal with XHTML? Now you can find out thanks to the W3C’s YABA-compatiable HTML and XHTML FAQ. Once you’ve digested, that enjoy the brand new draft for XHTML 2.0 -
Abbreviations and poetry
Finally, some clarity from the W3C on the use of abbr as summarized by Jesper Tverskov (via Anne van Kesteren.) -
Recognizing abbr; are newspapers the last mass medium?
The aforementioned rant on the RCMP raid of a journalist’s home, and the precedent it may establish, has now been posted. -
NYTimes on: the American perspective of Canada, flawed Ecstasy studies, and the iPod; bad HMTL
Yes, it requires registration — get used to it, registration is going to be the trend of ’04 — but The New York Times has a number of good pieces today, including: -
XAML implications; resting Rainmain
Chris Kaminski (through the WaSP’s Buzz blog) has posted a thorough overview of XAML and its implications, including a bit about the W3C’s “response”: SVG 1.2’s Rendering Custom Content. -
XAML is real;
XAML is real, is pronounced zamel, and is “the language used to declaratively render the user interface of the pages that make up the application” within Longhorn. (The presentation subsystem XAML accesses is dubbed “Avalon,” the UI, “Aero.”) From an article on MSDN, here’s the simplest XAML-based file you can write: -
Microsoft’s XUL: XAML
Coming out from under a pile of work to alert you about XAML (which as of this moment only pulls hits from Google on the “Transaction Authority Markup Language” — not the rumoured new language from Microsoft). Eric Meyer echoes exactly my grave concerns about this. -
Definitive essay on abbreviations; online news initiatives
Lars Holst has written what may be the definitive essay on the use of abbr and acronym. The well-researched piece concludes: -
Web development bookmarklets; Mozilla 1.5a, Firebird 0.6.1, and Thunderbird released; simple forms
Jesse Rudman has a collection of a dozen-half Mozilla-friendly Web development bookmarklets, many of which also work in IE and Opera. Three work in Netscape 4. -
Roll-your-own DTD; all-in-one DevEdge sidebar
Those wondering how to roll-your-own DTD might well be served by reading the W3C recommendation on the Modularization of XHTML. Helpful to know if you want to push the limits of XHTML. -
Semantic mark-up; TV funding; new XHTML 2.0 draft
Pretty much decided to scrap the rant I was going to publish about the latest CSS debate. The arguments have been made quite rationally by a number of people I respect, so I don’t think there’s a need to go over them again here. -
Standard-compliant new-window links
Via What Do I Know, a clever hack for opening pages in a new window, and similar to what I had planned to do (except I was using a class, which I might just drop) -
Weekend hits
Brief hits to ease you (and me) into a much-needed weekend: -
Retire HTML; CSS 2.1; interviewing Christopher Schmitt
Is it time to retire HTML? That’s what a new piece in Boxes and Arrows argues — and I surprised myself by agreeing with may of the points. The essay says dHTML has reached its limits as a Web application development tool, and suggests some potential replacements like Flash and Curl. -
QAML; The Eleventh Hour
Given XML is creeping up everywhere, it’s something I should really start playing with. And so, this is something I plan to look at for tomorrow: the Question and Answer Markup Language, or QAML. -
Specifying character sets; Netscape 7.0.1
A new series, the “WaSP Asks the W3C,” starts off with an informative little Q&A about setting the proper character set on documents. -
New validator
The new W3C validator is now available. The changes include increased XHTML support and many bugfixes -
XHTML 2 and CSS 3
-
XHTML revised
Reading the new XHTML 1.0 (second edition) recommendation, I came across this suggestion, in appendix C.13: -
HTML is not an acronym…
Discover the difference between an acronym, an abbreviation, and an initialism while learning some suggestions on how to treat them in Web pages. -
Show your attributes!
This mini-tutorial illustrates how to use the Document Object Model to access attributes, like title, and display them on a Web page. -
Correct DOCTYPEs
Zeldman points out something many Web builders (myself included) have missed: most of DOCTYPEs being included in today’s Web sites are wrong. The reason? They don’t include the full URLs. -
DOCTYPE clarity
If you ever wondered what DOCTYPE triggers a browser’s strict mode, Eric A. Meyer has the chart for you. -
Client-side data manipulation
Finally started to play with XML and XSLT, using it to manipulate some data about some human cannonball performances (a whole other story). I've never had the chance to work (in-depth) with ASP, PHP, or any other database-driven, server-side language, but using JavaScript to access the XML-HTML parser in IE 5+, I was easily able to do some pretty impressive data manipulation on the client-side. -
The fun with titles
Why it’s worth moving away from using titles for just usability aids. -
Basic Online Style Guide
A simple online stylguide for XHTML-based sites. -
Macs, frames, and usablility
The problems inherit in designing a usable site, especially with frames. -
Why can’t my checkbox be made read-only?
There has been some debate about this caused by an unclear description in the actually HTML 4.01 DTD and inconsistent browser support. The general consensus is that the readonly attribute only applies to inputs that have type set to “test” or “password”. -
Why do some characters not show up on a Macintosh?
This could be the result of a number of things, the first, and most likely being that a special character was pasted into the document from Windows-document. For Web pages to display accented characters and the like, they must be properly encoded. -
Should I use a DOCTYPE declaration?
Newer browsers are relying on the DOCTYPE declaration (a.k.a, DTD) to determine how a page should be displayed. -
Which standard is the right HTML standard?
The short answer is that there is no right HTML standard. If it validates, browsers should display it. Now, the longer answer. -
Which is the right extension:
Both, as long as your Web server is configured to serve the files as HTML documents. (To be exact, the extension doesn’t have to be either, it just has to match your Web server’ setup.)*.htmlor*.htm? -
How do I make a page redirect the user elsewhere?
To redirect a user to another page, you can put a <meta> inside the <head> tags. The following would automatically redirect someone to http://www.example.com: -
How do I force a page to reload?
The easiest way to do this is by putting a <meta> inside the >head< tags. This example would reload the page in about 60 seconds: -
Must I close all elements?
No, but the far-sighted would be wise to do so. Closing the elements makes working with style sheets much easier. Closed elements also make the document easier to debug. XHTML makes it a requirement for every element to be closed, so any <li> tag should end with </li> tag, any <p> should end with </p>. -
Should I quote attributes?
Generally, it is a good idea to quote attributes (e.g., <table width="350"> as opposed to <table width=350>) because the future version of HTML, XHTML, requires it. Also, some attributes most be quoted, for example, anything preceded by a + or -, or followed by a % -
Uppercase or lowercase?
In HTML it doesn’t really matter. You could have the elements in all caps (<HTML>), lowercase (<html>), or even in mixed-case (<hTmL>). The choice is a matter of personal preference, although future versions of HTML (the XML-compatiable XHTML) require elements to all be in lowercase. By using lowercase now, it could save a lot of work down the road. -
In older browser’s, my JavaScript/style sheets are being displayed as text.
This is an easy fix. Just wrap the content of your JavaScript/style sheets with a comment tag: -
Can I get rid of the white space “gutter” around my HTML pages?
There’s an easy way to do this using style sheets, as well as a way to do this separately for Netscape and Internet Explorer. -
The page displays in Internet Explorer but not Netscape, why?
If you’ve used a table to arrange the layout of your page, this is likely the cause of the problem (using a validation service could reveal the error). Check the HTML to make sure all the table elements are closed (i.e., <table>…</table>, <tr>…</td>, and/or <td>…</td>). Netscape browsers are far less forgiving in terms of table layout than Internet Explorer browsers. -
How can I create space between list items?
If it is a block of text, the best thing to do is wrap the text with a paragraph element (this is both valid and semantically correct, as Rudy pointed out on thelist): -
How do a remove the border around a linked image?
In HTML (and older browsers like Netscape 4.), it’s just a matter of adding border="0" to the img element. -
How do I get text to wrap around an image?
Use the align attribute in the img element. To be forward compatible, also use the the CSS float property. -
Is an
An alt attribute is required, even if the image requires no description (for example, it could be a purely decorative element). In such a case, use the alt attribute, but leave it empty, like this: alt=""altattribute needed if there is no description for the image? -
How can I control the size of a text field/input box?
Unfortunately, Netscape 4.x displays form fields using different criteria than the other browsers (Internet Explorer, Opera, and Gecko-based ones). -
How do I remove the scrollbars?
Before you start, you better have a good reason to do so—disabling scrollbars creates a lot of usability problems and can confuse users. Assuming it’s being done for a good cause, there are a few ways to accomplish this, but none are fool-proof. -
Do I need an
Even if you have no server-side script for the form, for example it’s a JavaScript-powered form, an action attribute is still needed. Like the alt attribute for decorative images, you can specify an empty value, like this: action=""actionattribute for a form? -
How do I get rid of the space around forms?
There are two easy ways to do this, the first is a invalid hack, the second uses style sheets. First the hack: embed the form in a table, placing the open and close form between the table elements: