Hey Brian? — Portfolio

HTML & the DOM

HTML (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 TextMate. 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

• HTML reference — W3 Schools
• HTML DOM reference — W3 Schools
• HTML DOM tutorial — W3 Schools
• Event handlers

Forms

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

• Zapatec Ajax Forms · 2
• Photography purchase request
• JavaScript pop-up generator

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

我很喜欢中国菜。

Results:

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

Africa Botswana Egypt Eritrea Ethiopia Kenya Madagascar Malawi Mozambique Namibia South Africa Tanzania Uganda Zambia Zanzibar Zimbabwe

Scrolling menu (Use Ctrl key for multiple)

Europe France Spain Monaco Greece Czech Austria

Conditional menus

What do you seek? Best Food Unique People Best wildlife Bang for the buck Best Music Most Romantic Best if you don’t travel much Retire

Select Registration Type Car Nothing Boat More Nothing Plane

VIN No.
Registration No.
Tail No.    Model

Tables

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

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

• Make your tables sortable

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:

• Upcoming events in San Francisco
• Todd Kerpelman’s take

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:

• Entry stamp
• Mongolian script
• Airplane

back to top