yin_yang

HTML5 & the DOM

HTML (HTML5, XHTML, DHTML, et al.) provides the structural foundations for billions of Web pages on the Internet. HTML employs elemental tags to display text, links, images, streaming media, forms, tabular data and other desired content to the end-user. Although static by nature, HTML can become dynamic by exploiting the document object model (DOM) via JavaScript and CSS or other methods.

Building blocks of the Web

I prefer to hand code my HTML in compliance with W3 standards, but I also value the content management and editing tools found in apps such as Dreamweaver and other modern text editors. After all: time is money, and beyond clean code, we all would like our web pages posted as quickly and efficiently as possible. (Editors don’t create bad code, humans do.)


HTML | DOM Toolkit


Corporate HTML | CSS work


Forms

Forms are a vital element of the Internet that allow users to submit data, query searches and buy things. Following are some examples:

Input foreign characters and convert to unicode:
Sample text:   北京   or   Běijīng

Results:


Sortable Tabular Data

Tables should be used for tabular data; such with my (sortable) baseball cards most wanted list:

Wanted Year Brand
Joe Montana 1981 Topps
Michael Jordan 1986 Fleer
Shaq Rookies 1993 All
Roger Clemens 1984 Fleer Updated
Barry Bonds 1986 Topps Traded Tiffany

Form elements

Checkboxes

Radio buttons

Love Hate Unsure

<input type="radio" name="ai" value="Love" />Love
<input type="radio" name="ai" value="Hate" />Hate
<input type="radio" name="ai" value="Unsure" />Unsure


Jump-to-page Pull down menu


Conditional menus









HTML-only table with a 1-pixel border

Sometimes there is a need to have HTML-only tables, especially with richly-formatted corporation communication emails where CSS style rendering on the user end can be entirely unreliable due to the universe of email clients— and their subsequent settings. The problem is that table borders in HTML have a two-pixel minimum size that will drive the design team to the brink. Here is a trick using cell spacing and an embedded table that will solve the trick.

<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
 <tr>
  <td>
   <table
width="298" border="0" cellpadding="15" cellspacing="0" bgcolor="#FFFFFF">
    <tr>

     <td>An HTML table with a 1-pixel border.</td>
    </tr>
   </table>
  </td>
 </tr>
</table>


Frames

They often cause targeting issues, but sometimes frames are really the best option:


Layers

Although the grand days of the <layer> tag have ended with Netscape 4.x, we can still achieve similar results by employing the mighty z-index. Here are some examples:

back to top