HTML

People often ask me about HTML, what is does and how it differs from other coding languages. It’s a great questions. The analogy I use, if we may compare to a building, is that HTML provides the structural foundation, the girders so to say, for the millions of Web and mobile pages on the Internet. These digital girders, instead of making space for floors and walls, can display and arrage text, images, video and other digital content in a Web browser. The floor plan of this HTML page is mapped via it’s document object model (DOM for short.) Although static by nature— it can’t change or update by itself— HTML may be transformed, often times in real time, by exploiting the DOM via JavaScript and Cascading Style Sheets, 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 Visual Studio Code and Adobe Dreamweaver. After all, time is money, and beyond clean code, we all would like our web pages posted as quickly and efficiently as possible.

HTML Toolkit

Forms

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

The checkbox element

<input name="numbers" type="checkbox" value="1">
<label>一</label>
<input name="numbers" type="checkbox" value="2">
<label>二</label>
<input name="numbers" type="checkbox" value="3">
<label>三</label>
<input name="numbers" type="checkbox" value="4">
<label>四</label>
<input name="numbers" type="checkbox" value="5">
<label>五</label>
<input name="numbers" type="checkbox" value="6">
<label>六</label>

The radio button element

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

The scrolling menu element

<select name="Europe" size="5" multiple="multiple">
  <option selected="selected">Europe</option>
  <option value="france">France</option>
  <option value="spain">Spain</option>
  <option value="monaco">Monaco</option>
  <option value="greece">Greece</option>
  <option value="czech">Czech</option>
  <option value="austria">Austria</option>
</select>

HTML examples

HTML-only table with a 1-pixel border (legacy)

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.

An HTML-only table with a 1-pixel border.
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC";>
  <tr>
    <td><table width="298" border="0" cellpadding="15" cellspacing="0" bgcolor="white";>
        <tr>
          <td>An HTML table with a 1-pixel border.</td>
        </tr>
      </table></td>
  </tr>
</table>

Frames (legacy)

Frames often cause targeting issues, but sometimes frames are a decent option:

local_airport