More Scroll Box Codes

One of the more popular pages on Quackit is the MySpace Scroll Box Codes page, where you can get copy/paste codes for your MySpace page. Given the popularity of this page, I recently decided to add a few more scroll box related pages. These are:

• Scroll Box Colors - Copy/paste codes for creating colored scroll boxes.
• Scroll Box with Pictures - Codes for adding images to your scroll boxes. This includes images as actual content in the scroll box, as well as background images. Background images allow you to type text over the top of the image.
• Scroll Box with Borders - Copy/paste codes for creating borders around your scroll boxes.

And don't forget, you can make it easy on yourself by using the Scroll Box Generator.

Downloadable HTML Frames Templates

Although HTML frames are not normally the best way to build a website, they can be very useful in some circumstances.

For example, if you need to provide lots of reference information, frames can help immensely with navigation. Frames enable the user to scroll through the navigation independently of the main content.

Frames also enable a second (or third, etc) menu to be populated based on a selection from the first menu.

Because frames can be a bit tricky to get your head around at times, I recently added some downloadable frames templates to the Quackit website. These will fast track the development of your frames-based website. You can download selected templates, or download the whole lot in one go. You can also copy/paste the code directly from Quackit if you prefer.

So, if you need to build a website using HTML frames, check out these frames templates.

4 Essential Web Building Skills

The web has come a long way since it's inception. In the early days, most web pages were static HTML files, each file organized into different levels of headings (i.e. H1, H2, H3...) and a bunch of other markup.

Now, although there are still many static websites around, most medium to large organizations have dynamic websites. These are websites that draw their content from databases. These websites often use scores of different technologies. Large websites often have many different teams working on them, all with different skillsets.

Whether you plan to build large complex websites or smaller and static websites, I can think of 4 skills that stand out as being pretty much essential. Without these skills, you will have a hard time creating and publishing your website or getting a job doing so.

The Skills

• HTML - HTML is the language that allows you to create each web page on your website. HTML stands for HyperText Markup Language and is responsible for the various elements that you see on websites - elements such as headings, paragraphs, hyperlinks, bullet lists, embedded images, embedded music/video files and more.
• CSS - determines how your website looks. For example, for each HTML element on your website, you can use CSS to determine its width, color, alignment, size etc. CSS stands for Cascading Style Sheets.
• Understanding of web hosting and domain names - to make your website available for the world to see, you need to host it on a web server. Web hosting providers make this their business, so you don't need to know all the details about web servers, firewalls etc. All you need to know is how choose the most suitable hosting provider for your website.
• FTP - this is only required when you need to upload your website to a web server (your hosting provider's web server). Doing this allows the world to view it. This is quite a simple thing to learn. Technically, FTP is a protocol (it stands for File Transfer Protocol), but all you need to know is how to operate FTP software.

Don't get me wrong - there are many other skills to learn if you want to become a professional web developer. But these are the main ones you should learn first. These should enable you to get your "foot in the door" so to speak.

One other skill that I recommend learning is how to use web graphics software. Even if you don't see yourself as a graphic designer, a basic understanding of web graphics will assist you a lot in your web development efforts.

To learn more about these skills and other web development skills, check out the web building skills tutorial.

Is Your Website Available 24/7?

One of the main benefits of outsourcing your web hosting is for availability reasons.

Sure, you may have your own web hosting equipment - web server, firewall, high speed internet connection etc. You may also have the necessary skills for hosting your own website. But do you have the inclination to be available to bring your website back online at any hour of the day?

If you host your own website, what would you do in the following scenarios:

• You're at the beach on a Sunday afternoon, relaxing with your partner. Suddenly your pager goes off indicating that your website is down.
• You've just arrived at the supermarket (after waiting in traffic for half an hour). You're about to go shopping. Suddenly your beeper goes off.
• You've decided to take a well-earned break. You're currently on a 3 day bush walk through the beautiful southern alps in New Zealand. Then... your beeper goes off!

And, all of the above scenarios assume that you have a reliable website monitor set up. If you didn't have monitoring, you wouldn't know that your website went down... until you were able to get online and check your website.

If you take your website seriously, then you should be serious about web hosting. I wrote about website availability in my web hosting tutorial. This includes some of the things that can impact the availability of your website.

If you don't already use an external hosting provider, I encourage you to consider it. Hosting is so cheap these days.

Can you afford not to have someone looking after your website 24 hours per day, 7 days per week, 365 days per year?

Is a Domain Name Really Worth it?

If you're just starting out, creating your website for the first time, you might have wondered whether you need a domain name. And if you're trying to build a free website, a domain name wouldn't even be an option.

My thoughts on this? Well, if you really can't afford a domain name, do what you need to do. But, as long as you understand the benefits of having your own domain name. That way, in the future (when you can eventually afford your own domain name), you will know what to do.

Here's a snippet from the FAQ section of Quackit's Create a Website tutorial.

Although it is possible to have a website without it's own domain name, I wouldn't recommend it. Apart from making your site appear "amateurish", there are disadvantages to not having your own domain name.

One key benefit of having a domain name is that it will ensure that your website address doesn't change unexpectedly in the future. Even if you change hosting providers, your domain name will remain the same.

A domain name can also help your listings in search engines and directories. For the small cost of registering your own domain name, the benefits are well worth it.

If you can't afford a domain name, then you would need to either, host your website in a sub-folder of another website (eg, www.othersite.com/yoursite) or tell people to access it using its IP address (eg, http://74.125.19.104). Not all hosting plans will allow you to do this. The best (and easiest) way to go is to simply register a domain name.

So, if you really can't afford a domain name, don't let that stop you from building your website for now. But you should definitely keep in mind the benefits to be had from registering your own domain name.

And remember, once you register your domain name, nobody else in the world can.

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.