HTML Subscript

In my last post, I explained what superscript is and how to specify it in HTML. In this post, we'll look at Subscript.

Subscript is very similar to superscript. You might remember that superscript text is rendered small and above the baseline.

Subscript text, on the other hand, is rendered below the baseline. Subscript text is just as small as superscript.

Subscript text is often used chemical formulas. For example, here's the chemical formula for water:

H₂O

You'll notice the "2" was rendered in a smaller font and below the baseline.

Subscripts can also be used in mathematics to represent the number's base (or radix). For example, if you're displaying a hexadecimal value, you could render the letters "hex" in subscript:

CCCFED_hex

To learn how to specify subscripts, check out this page which explains how to render HTML subscripts.

HTML Superscript

You might occasionally find yourself needing to use superscript within your HTML documents. Fortunately, HTML provides you a tag for rendering superscript. First, let's look at what superscript is.

What is Superscript?

Superscript is text that is rendered at a smaller size, and is raised from the baseline of the normal flow of text. Superscript is often used in mathematical expressions, but can have many other uses.

For example, you could surround a registered trademark symbol within HTML superscript tags to render the trademark symbol in superscript text.

The HTML Superscript Tag

In HTML, to render text in superscript, you use the sup tag. For information on HTML superscript usage, check out Quackit's page on the HTML 'sup' tag.

Send Email Directly from your Website

As you build better and more functional websites, you might find yourself thinking about how cool it would be to be able to send emails directly from your website. Or you might find that it's more of a requirement than a novelty.

Most business related websites automatically generate emails at certain times. There are plenty of reasons why you might want to generate emails directly from your website. Here are some examples:

• You might send users a welcome message when they register with your website.
• Your website might automatically send a regular newsletter to subscribers.
• Your website could have a feedback form that enables users to contact you. This form could automatically generate an email to you the user submits it.
• You could configure a notification/alert email to be sent to you whenever an error that requires urgent attention is generated.
  
• Your website might have an "Email this article" button.

There are many more reasons you might need to send email directly from your website. Whatever the reason, you'll need to build a script to generate these emails.

Both ColdFusion and PHP make sending mail extremely easy. ColdFusion's CFMail tag makes sending email a breeze, whilst PHP's mail() function is what you need to use on a PHP platform.

If your website still doesn't have any mail functionality, perhaps now's the time to change that!

Cellpadding with CSS

Padding the cells of a table used to be done using the HTML 'cellpadding' attribute. Now, the W3C has deprecated the 'cellpadding' attribute in favor of CSS.

But, as you may be aware, there isn't an equivalent property in CSS. CSS doesn't have a 'cellpadding' property. It has the 'padding' property. Only catch is, the 'padding' property only adds padding to the element that it has been applied against.

For example, if you apply padding to the 'table' element, it will pad the border around the outside of the table, but not the individual cells. Therefore, you need to apply the property in a way that will pad all cells within a table.

This is very easy to do - as long as you know how. That's why I created this article on how to apply padding to your tables using CSS.

Advantages of AJAX

AJAX (also referred to as "remote scripting") stands for Asynchronous JavaScript And XML. AJAX is being used quite extensively these days, particularly on a lot of "web 2" websites.

AJAX is perfect for when you need to call a server process without reloading the page. Often this server process would be called based on user input. Traditionally, this would result in the page having to reload in order to call a server side script. But with AJAX, this doesn't have to be the case - you can call the server side script without reloading the page.

For example, based on the user's input, you might need to call the database so that you can display a list of options. Using AJAX, you can combine XML, JavaScript, your favorite server side language, and your database to provide a seamless experience for your user.

Quackit has a quick AJAX tutorial that shows you how to dynamically populate a drop down list from the database - based on the user's input. Using this example, I'm hoping you'll be able to see the potential of AJAX in providing usable interfaces on today's websites.

How SWiSH is your Website?

There's no doubt that websites built with Adobe Flash are generally more usable nowadays than they were in the early days of the web. Back then, Flash was typically seen as a way to add visual effects to a website, often with little regard to usability.

Fast-forward to the current day. Flash has risen to a whole new level with SWiSH Max2.

SWiSH Max2 lets you to create powerful, user friendly Flash based websites with incredible ease. If you haven't heard of SWiSH Max2, check out the SWiSHzone website.

As SWiSHzone say... "With SWiSH Max2 you can build anything from flash websites, animated menus, banner ads, text effects, presentations, cartoons, slideshows, applications to video productions".

If you'd like to try SWiSH (or if you already use it), check out these SWiSH templates. These templates are basically pre-built professional websites built with SWiSH. After downloading a SWiSH template, you can use SWiSH Max2 to modify it as you wish (along with Photoshop and Dreamweaver).

Imagine how quickly you could whip together a professional looking website for your clients using SWiSH Max2 combined with a SWiSH template.

By using a SWiSH template, you could pass the savings on to your client. Or if you'd prefer, you could keep all the profit to yourself!

Create Professional Looking Flash Intros - Fast

OK, I'm the first person to say how I despise most Flash intros. So many Flash intros just seem to get in my way to finding the info I'm looking for.

That being said, I recognize the value that a good Flash intro can bring to a website - especially from a branding perspective (as long as it's positive!). And if you're a web developer, you might not have much choice. Your client might simply be telling you "I want a Flash intro".

And if you don't exactly consider yourself a Flash guru, you might become a little stumped after your client demands a Flash intro. After all, you don't want to turn your client away just because you don't feel confident with Flash, right?

What you need is a Flash intro template.

A Flash intro template is a template (as the name suggests!) that comes with it's own pre-built Flash intro. All you need to do is open the template and modify it as required. You do need Flash to modify the template, but you don't need to be a Flash guru or anything like that. Flash templates are designed to make editing easy.

You can browse a huge range of Flash intro templates at the Quackit template store.

So, the next time your client asks you for a Flash intro, maybe you can surprise him/her with a professional looking template that you can put together within hours!

Ever wonder what !DOCTYPE means?

Maybe you've seen it many times but not noticed it. Or maybe you've noticed it and wondered what it actually means. Of course, it could be that you know exactly what it is and what it does!

Anyway, what I'm referring to is a doctype declaration. Most web pages being created today include a doctype declaration.

For example, if you've been creating XHTML files, you would use a line similar to this at the top of your XHTML documents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The purpose of a doctype declaration is to declare the Document Type Definition (DTD). A DTD is used in XML to determine the rules that make up that XML application. In this example, XHTML is the XML application - it's an application that is based on the XML syntax and rules etc.

To learn more about DTDs and DOCTYPE declarations, check out the DTD section of Quackit's XML tutorial (or more specifically, the DOCTYPE page demonstrates how to use DOCTYPE).

Even better, why not start at the beginning of the tutorial? Either way, there's a wealth of information about DTDs, DOCTYPES, and XML in general!

XSLT before/after example

XML has become a major technology for organizations who need to share data between often disparate applications.

Many web developers are familiar with what an XML file looks like. In fact, many of these developers probably uses XML to store within their application and/or transfer data to another (perhaps remote) application.

Despite this, many developers are unaware of how these XML documents can be transformed using XSLT.

XSLT (which stands for Extensible Styles Language Transformations) allows you to transform the contents of your XML document so that they look more presentable. For example, you could use XSLT to output the contents into an HTML table. Or, you could simply use XSLT to apply some CSS so that it just looks different (and you can lose those XML tags if you like!)

Quackit's XSLT tutorial (which is part of the larger XML tutorial) contains a simple XSLT example. From there, you can follow the XSLT tutorial through to see how you can transform your XML documents using the various XSLT tags.

Hopefully, it might get you thinking about how XSLT could benefit your own applications and web development.

Displaying date/time in JavaScript

For JavaScript beginners, getting/displaying the current time can be a little more involved than expected. This is because JavaScript contains a bunch of date/time functions that you can use depending on what part of the date you need.

For example, the getDate() function retrieves the day of the month. It doesn't retrieve the whole date - just the day of the month (i.e. 1 - 31). getDay() on the other hand, retrieves the day of the week.

These are just two of many date/time functions. What you need to do is use whichever JavaScript date/time function suits your purpose, then (still using JavaScript), massage the output as necessary.

Quackit's JavaScript tutorial demonstrates how you can display the date and time using JavaScript. So, you can simply copy and paste the code if you like. After all, displaying the date and time shouldn't be so hard!

Specifying colors using RGB functional notation

You might know that in HTML/CSS, you can specify colors using hexadecimal values or the color name.

Well, there is another way of specifying colors that many web developers are completely unaware of.

In addition to using the hexadecimal notation or the color name, you can also use the RGB functional notation. The RGB notation represents the different amounts of red, green and blue that make up the final color. Actually, the hexadecimal notation also represents an RGB value. It's just expressed using hexadecimal instead of decimal.

So, to see how you can use RGB notation in your CSS code, check out Quackit's CSS color property page.

Changing font on MySpace

There's been a heap of people asking how to change the font on their MySpace profile page (or if they can even change the font at all).

Well, the good news is that yes, you can change your font on your MySpace profile page. Even better news - it's really easy!

The easiest way to change your MySpace font is to use Quackit's MySpace Text Generator.

Or if you prefer, you can check out these MySpace Font Codes.

Now, one thing to remember is that font codes depend on the user's computer having that font installed on their computer. If they don't have the font you specify, things will look different. That's how font code works in HTML/CSS. That's why it's always good to supply 3 options when specifying which font to use. That way, the user's computer will pick the first one that matches.