Three Extremely Useful Free Online HTML Tools

I've listed below three really useful free online tools that can save tons of time when developing in html.

pForm - HTML Form Generator

We all have to build them at some point, as tedious as it can get, and when styling forms with CSS, they can start to become a pain the more you build them. But there is a site out there that can save you a load work each time you need to build a form: its called pForm by Appnitro. pForm's simple interface allows you to just click your way to creating a form. Its just a matter of selecting the form elements you need and naming them, while pForm does the rest. The CSS and HTML that you download looks standards compliant from what I've seen. The service opened my mind up to a newer way of building forms. Instead of fussing with display, padding, margins, and our friend IE6's rendering issues, place the form elements in ul and li tags. The natural block display of the li's allows for easier horizontally-based forms...and there's no tables involved. I even built a template from the service and gave it generic styling so that I can just copy and paste whenever I need to build a form and avoid all the headaches.

Premailer: Preflight for HTML Email

Premailer, from dunae.ca, is an extremely useful online tool in creating HTML emails. All you need to do, is design and code the email as you normally would with a website, with standards-compliant HTML and an external CSS file, and upload your final page. Post the link to your page (you need to include the name of the file, even if it is index.html). Click submit and Premailer does all the work for you, placing all the styles inline, as well as turning relative URLs to absolute URLs. I use it all the time, and it is an extremely useful tool.

Kotatsu - HTML Table Generator

Kotatsu, from Ask the CSS Guy, was just released 1 day prior to this posting and is an HTML table generator that is just awesome. Its a very simple interface that allows you to create a table, and add classes to rows and columns. So simple in fact, a monkey could do it, and my monkey did do it. I can now remove Dreamweaver from my computer because this tool is so awesome. I almost can't wait until I have to create a table so that I can use it.

Spam-Proof Your Email Address Through Javascript

Nobody likes placing their email address directly on a page because of spam bots crawling their site trying to find one. I recently had to place an email address on a page and found a workaround, where you can add your email address and hide it from spam bots at the same time. Its a javascript workaround and since spam bots are too lazy to read javascript, your email address is safe and hidden away, while you can read it perfectly fine. Here's the code:

<script type="text/javascript">
<!--
address=('you' + '@' + 'domain.com')
document.write('<a href="mailto:' + address + '">' + address + '</a>')
//-->
</script>

Swap out the variables for your information, and you're done. Spam-proof email address. Of course, you need javascript enabled to see it.

Learning CSS Part 4: Styling Links and Forms

This is the 4th and last part of Learning CSS: Styling Links and Forms.

LoVe HAte

An a tag has 4 states, and therefore 4 pseudo-selectors attached to it. a:link, a:visited, a:hover, a:active. While an a tag can be styled by just targeting a, the pseudo-selectors will style each state of the a. When using this method, it is best to keep them in the order described above, as it will not give any rendering issues or other problems. A way to remember this order is Love-Hate… LoVe HAte… :link, :visited, :hover, :active.

The Link state is the default state of the link, where it has not been clicked or hovered over.
The Visited state is the state of the link after the link has been clicked and the following page has been visited.
The Hover state is the state in which the mouse pointer hovers over the link.
The Active state is the state in which the link is active, such as clicking on a tabbed-navigation with submenus.

Link Off- and Hover-State Buttons

An a tag is an inline element, which means it can appear many times on the same line. It can have any style applied to it just like every other element. But in order for it to display with a certain width and height in a standards-compliant browser (when I say, "standards-compliant browser," I mean "any browser that is not IE6"), the display value of the a tag must change. There are 3 different values for display:

display: inline; display: block; display: none;

An inline value for display will change the properties of any element to display as an inline element (multiple instances on one line).
A block value for display will change the properties of any element to display as a block-level element (one instance per line).
And a display value of none will completely remove the element from the page.

Button Background

The display value for an a tag must be changed to display: block in order to receive a width and height. When declaring a multiple-state button, it is best to create all instances of the button's background image in one image and then change the background's positioning. For example:

a:link { background: url(images/button_bg.jpg) no-repeat 0 0; }
a:visited { background: url(images/button_bg.jpg) no-repeat 0 -50px; }
a:hover { background: url(images/button_bg.jpg) no-repeat 0 -100px; }
a:active { background: url(images/button_bg.jpg) no-repeat 0 -150px; }

A button's required styling will change when there is text and when there is no text. When there is no text, the width and height are required. Some issues may arise in some browsers with this process, in which case some padding and a non-breaking space ( ) may be required. When there is text, height can be eliminated and padding will be needed to reveal the background image vertically.

Form Styling

By default, all elements in a form are inline elements, except a fieldset (almost like a div for forms). So because form elements are inline, they all appear on one line, and since a form is almost always vertical, you want to change the elements to display:block, placing each element on its own line. An input field can have its background color changed, it can have a background image, anything you can do with css, can be done on input elements...after placing display: block as a style, think of them as tiny divs from that point on.

Like an a tag-based button, a submit button can also have a background and hover states applied. A submit button will need a display: block, width, border: none, and padding. To achieve a link-effect, a submit button can also receive a :hover pseudo-selector and cursor: pointer, such as below:

input.submitButton { display: block; border: none; width: 150px; padding: 15px 0; text-align: center; background: url(images/button_bg.jpg) no-repeat 0 0; } input:hover.submitButton { background: url(images/button_bg.jpg) no-repeat 0 -50px; cursor: pointer;}

This effect will be shown correctly in standards-compliant browsers. It will not work, only showing the normal state of the input button and cursor, in IE6, surprise surprise.

As I said at the beginning of part 1, this is a crash course in learning CSS. If you want to get more in depth, I suggest reading CSS Mastery and Bulletproof Web Design (review), both available at Amazon. It was because of these two books that I am able to share this information. Of course, you can receive and be updated with more CSS info from various sites out there, which are pretty easy to find.

The end.

Freakin' Sweet Free Fonts

I was browsing around fontspace.com earlier today and came across these freakin' sweet fonts, and thought I would share them. Carnivalee Freakshow by Livin Hell, Barber Shop by Last Soundtrack, and Santos Dumont by Billy Argel. Preview images below.

Learning CSS Part 3: Box Model and Background Images

In part 3 of Learning CSS, I am introducing the Box model and Background Images.

Box Model, Margins and Padding

Every element in HTML has what is called a box model. A box model consists of height, width, padding, margin, and border.

Box Model

The padding and margin of an element are similar, yet different. They are similar in that they add space around the width and height of an element, yet they are different in how they do it. Padding adds the space to the inside of the element. Margin adds the space to the outside of the element. For example, think of two polaroids placed next to each other. The white space around the picture is the Padding, making the element larger than it actually is. The space between the two polaroids is the Margin.

Note: padding, margin, and border all add to the height and width of the element. Also, FF reads padding and squeezes the content in, IE6 reads padding and pushes the border out.

Border consists of border-width, border-color, border-style. They can be truncated into one line:

border: 1px solid #000000;

Size, style and color. Border must be declared in this order.

For margin and padding, there are margin-left, margin-right, margin-bottom, and margin-top, same for padding. However, there is also a truncated version of these as well:

margin: 10px; padding: 10px;

The code above specifies all edges have 10px margin/padding.

margin: 10px 5px; padding: 10px 5px;

The code above specifies top and bottom have a 10px margin/padding, and left and right have a 5px margin/padding.

margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px;

The code above specifies the margin/padding size of the top, right, bottom and left edges. They go clockwise.

Box Model Measurements

There are a few different ways to specify the size of an element: em, px, and %.

em refers to the em-spacing of the font. em-spacing refers to a space the size of an "m" in the font. The size of an em-space is entirely dependent on the size of the font (specifically the p tag), therefore, if the font size increases, so does the size of the boxes using em as a measurement. And the default size for each font varies for each browser. Got that? Good. Moving on…

px is the least confusing. What you type is what you get. 10px is 10px.

% is a measurement based on the size of the containing element, whether it be body, div, or anything else. Declare 25% height or width on an element and that element will be 25% high or wide in its parent element. The actual px values will vary depending on the size of the parent element, but the % will stay the same.

Elastic, Fixed, and Fluid Sites

There are three types of websites: Elastic, Fixed and Fluid.

Fixed has all values in px. Nothing moves, nothing changes.
Elastic has all values in %. Everything is based on the size of the browser window.
Fluid has all values in em and %. The layout changes with the size of the browser window and the font changes with the user's default settings.

Background Image Placement

Because every html element has a box model, every element can also have a background image and color. Specified as background, background-color, background-image, background-position, background-repeat. Everything can be condensed into one call:

background: #003300 url(images/image.jpg) no-repeat 20px 50%;

The order is and must be as follows: color, image url, repetition, left position, top position. The background color will always appear beneath the background image. The background image can be told to repeat-x, repeat-y, repeat, or no-repeat.

The position of the background image is specified by the last 2 numbers. You can specifiy these as left or right and top or bottom. If you use pixels (say 25px 75px) to place the background image, the background image will be placed 25px to the left and 75px down, based on the top left pixel of the image.

If you use % (say 10% 100%), the image will be placed 10% left and 100% down, however, it is not based on the top left pixel. For 10% left, it is based on a location that is at the 10% mark of the entire width of the image. For 100% top, it is based on a location that is at the 100% mark of the entire height of the image (positioning it flush with the bottom of the element). 0%, 0% mark. 25%, 25% mark and so on.

Learning CSS Part 2: Classitis/Divitis and Font Control

Last week I described the basics of XHTML and CSS. This week I am continuing with "Classitis and Divitis"

"Classitis" / "Divitis"

Classitis is a term for the overuse of unnecessary classes on an element. Such as in the example below, where the h1 is the only tag within the div.

<div> <h1 class="headerText">Heading</h1> </div>

It is best to directly target the h1.

Divitis is a term for the overuse of unnecessary divs in the markup. For example:

<div> <div align="center"> <h1>Heading</h1> </div> </div>

The <div align="center"> adds unnecessary markup to the HTML, when it can just be applied to the h1 CSS style.

Font Control

Below are style properties used in styling text:

• font-weight: declares bold or normal
• font-style: declares italic or normal
• font-size: declares the font size (10px)
• font-family: declares the font used. This uses a comma-separated list so that if one font is unavailable, then the next font is read, until it has the declaration of a sans-serif (Verdana, Arial, Helvetica, sans-serif;). If your font name has two words separated by a space, you need to enclose them in quotes ("Lucida Grande", "Arial Black", "Century Gothic";)
• line-height: declares the line height of the font. It is best to set this to 50% more than the font size as this provides the user with visual "comfort" while reading. ie: 12px/18px, 10px/15px, 18px/27px
• text-decoration: declares whether text has an underline, overline, line-through, blink, and none
• text-align: declares whether text is aligned left, right, center, or justified
• letter-spacing: declares the width of the space between letters
• word-spacing: declares the width of the space between words

Most of these can be declared in one line:

font: normal 12px/18px Verdana, Arial, Helvetica, "Century Gothic", sans-serif;

The order being: (font-weight or font-style) font-size/line-height font-family.