Free Tartan, Stripe, and Tabs Generators

Need to make some tabs, stripes, and tartan patterns? Then check out these free generators:

Tabs Generator
Tartan Maker
Stripe Generator

All of these generators and makers are from the same creator. They also have a Reflection Generator which I have not tried yet. The purpose of these generators are for web use but you can use them for other purposes too… like making a clothing pattern or for your in-game user interface.

Enjoy! :D

How to Make a FAQs Page

Another use for the anchor tag <a> is for FAQs pages or to create jumps to the top of a really long web page. To do this, we need the use of the average link tag; <a href=”"></a>; and a new attribute called name. Name basically marks a point that tells the browser that this point or area is called so and so. You can place whatever you want in the name but just make sure it’s something that is related like “question1″, “artsubmissions”, or “emailme”.

<a name=”question1″></a>
<strong>Question: How can I contact you?</strong><br>
Answer: You can reach me at rio-at-pixelpetunia-dot-com. Replace the words for the appropriate symbols, @ and ., and remove the hyphens.

Now that you’ve made an anchor with a name, here’s how you link to it using the average link tag: <a href=”#question1″>Question: How can I contact you?</a>. The pound sign informs the browser that it should look for an named anchor. Without it, you will be redirected to a 404 error file that the file couldn’t be found or something similar.

When that link is clicked on, it will jump to where the anchor is placed. If for some reason it doesn’t work, check to see if you typed the name correctly in both anchor tags and make sure that no other anchor has the same name. A complete FAQs page should look like this:

<a href=”#q1″>What is this site about?</a><br>
<a href=”#q2″>Who are you?</a><br>
<a href=”#q3″>How can I reach you?</a><br>
<hr>

<a name=”q1″></a>
<strong>What is this site about?</strong><br>
It’s about so and so and this and that.<br><br>

<a name=”q2″></a>
<strong>Who are you?</strong><br>
So and so… or am I this and that?<br><br>

<a name=”q3″></a>
<strong>How can I reach you?</a><br>
By land, sea, and air!

As I said earlier, you can also use anchors to jump back to the top of a page as you see in those “Back to Top” links. To make it, just type this: <a href=”#top”>Back to Top</a> and you’re all set. When this link is clicked on, it will jump to the top of the current web page.

Btw, to link to an anchor in another page, set up your link like so: <a href=”faqs.html#q3>contact me</a>. This will jump straight to question 3 in the FAQs page without the surfer having to go the roundabout way. Now go out there and create long FAQs pages! ; D

Finding a Good Web Host

Finding a good web host can be tricky particularly if you’re new to the whole process. You can find your new web host by making a search, going to review sites like Find My Hosting, setting up with your domain registrar as GoDaddy provides, or best of all, through word of mouth.

Setting up with your domain registrar is really quick and easy. All you need to remember is that one account and everything is taken cared of from your domains, email and website. GoDaddy, for example is one such domain registration sites that also offer this additional service. I’ve personally never used their web hosting service but from what I hear, it is best only if you’re not expecting the fastest connection speed.

Searching a web host on your own is not one I recommend you do first. Rather, ask friends (online or not) what they use and recommend. Or ask how their experience with a certain provider was like. Just be aware that everyone’s personal experience differs when it comes to their web hosting provider due to each of our own hosting requirements. Get other’s opinions, visit the web hosting website and scope out the business (does the site look professional? do they have customer service? is there a faqs page?), see if they have a setup fee (some have setup fees and others do not), and compare the prices.

Please note that some hosting services will bind you to a year’s worth or hosting. If you should cancel before the year’s end, you will most likely forfeit the remaining months worth of hosting fees. If possible, get a hosting where you can pay on a monthly basis which will not automatically charge to your account. When fees are automatically charged, they may do so in advance. For example, one hosting I have dealt with automatically renewed my hosting account two or three months before it was supposed to be renewed (or at least when my hosting was established). Read the fine print and ask the hosting provider questions. It never hurts to ask!

If you like what you hear and see, go with the hosting provider that you are most comfortable with! If for some reason, you do not like the service, you can cancel your account and move it to another web hosting service. Just make sure you do not register a domain through them unless it’s a domain registrar like GoDaddy because it can become quite complicated when your former hosting provider “owns” the domain and transfers can get tricky and maybe even expensive (some hosting services charge fees).

As for my personal recommendations, I personally like Rydia.net and Host Max Pro. Rydia is specifically for artists and you can have a huge amount of traffic without having to be moved to a dedicated server which can get really expensive with the average hosting provider. I’ve used them for years and have had no problems though it’s not for the newbie as they do not have a cPanel (area to control various aspects of your web site account). Host Max Pro, on the other hand, is a fairly new hosting provider that I’m using that is very good for new users. They have a cPanel and their customer support is fast, not to mention their prices are fantastic! But don’t just take my word for it, have a look for yourself and ask around. n_n

Backgrounds and Blockquotes

In this article, I’ll tell you the secrets to creating block quotes and adding backgrounds. I know you really want to read about backgrounds so I’ll cover block quotes first. Don’t worry, it’ll be quick. ; )

Block quotes are really useful tags especially if you’re quoting someone or want to separate a block of text to make it stand out. The past coding examples I did, for example, I placed in block quotes. To use block quotes, all you need to do is place the <blockquote> and </blockquote> tag before and after the block of text you want quoted. Once placed, it will automatically tab the text and separate it from the previous and next paragraph.

This, for example, is text placed in a block quote. You can choose to add images in here too. Look! It’s the Pixel Petunia favicon! You can even change the font color and so forth if you want. …Pretty neat huh? 8 )

All right, all right. I’ll get on to adding backgrounds! Sheesh!

To add a background image or to change the background color to the whole site, you need to add certain attributes to the body tag. These attributes are bgcolor for a single color or background to place an image.

For bgcolor, there are three ways to define the color: 1) name 2) hexadecimal value or 3) RGB value. In Fun with Fonts, I went over the first two. Go back if you didn’t read that part or if you want to refresh yourself. For RGB, it works like the hexadecimal in that it specifies the red, green and blue values like this: RGB(0,0,0). RGB is something that is hardly used and as I mentioned before, I prefer using names or even more, hexadecimals. If you’re dead set on using RGB, you can get these values from your graphic software. Anyways, here is three different methods of declaring a color background:

<body bgcolor=”white”> – name
<body bgcolor=”#FFFFCC”> – hexadecimal
<body bgcolor=”RGB(0,0,0)”> – RGB

Regarding colored backgrounds, try to stay away from really bright and obnoxious colors like magenta or bright yellow. They’re a real pain to the eyes if you stare at them too long. O_O

If you prefer something more fancy, you can set an image background. There are two rules for image backgrounds: 1) it has to be seamless and 2) you must be able to read text on top of it. If the background image is not seamless, it will make your site look very unprofessional and frankly, the result is quite ugly. Regarding number 2, it pretty much defeats the purpose of your site if no one can read it, no? Moving on, as with images and links, you can refer to the image relatively or absolutely.

<body background=”image/background.gif”> – relatively
<body background=”http://www.yoursite.com/images/bg.jpg”> – absolutely

As I also mentioned previously, do NOT use the absolute method and link to any other sites but your own. That is bandwidth stealing! Anyways, now that you know how to add background images, here a few sites that have some cute stuff you can use!

Cute Desktops Cute Tiles
Squid Fingers
Mysie’s Backgrounds
Japanese Backgrounds

There’s tons more sites out there that offer free backgrounds so search around and you’ll find something eventually. : )

Fun with Fonts!

Now that you know the basics of HTML, let’s turn it up a notch and step it up by working with fonts! There’s many things you can do with fonts include change the font type, it’s color, and it’s size. The font tag; <font>; requires a closing tag and attributes must be defined or else it will not work properly. Let’s start by changing the type of font! For this to work you need to use the face attribute like so:

<p>This is the <font face=”Times New Roman”>Times New Roman</font> font.</p>

Above, I declared a set of words to only appear in the Times New Roman font. If you would like a whole paragraph to be in a certain font style, you must place the font right after the <p> tag. Don’t forget to close it!

Some other font faces include: Verdana, Arial, Helvetica, Geneva, Courier, and Bookman. It is best to use fonts that are available in all machines like the ones listed above or else the page will not appear properly. To cover all the bases, most designers specify at least two fonts like this: face=”Verdana, Arial, sans serif” or this: face=”Times, Courier, serif”.

Serif refers to fonts that have those extra small strokes at the ends of each letter. Times New Roman, for example, is a serif font whereas Verdana and Arial is a sans serif (sans mean without). Online, most people prefer to use sans serif fonts as it is easier to read than serif fonts. On printed material, preferences lie with serif fonts like Times New Roman. Regardless, work with the style you like. The only tip I suggest you remember is to keep it legible.

Speaking of legibility, I’ll now teach you how to add color! The number one option most amateur web designers do to make their web sites illegible. Colors can be defined by it’s hexadecimal value or it’s name. Below is some basic hexadecimal colors:

#000000 – black
#CCCCCC – gray
#FFFFFF – white
#FFFFCC – cream
#0000FF – blue
#00FF00 – green
#FF0000 – red

For a quick and easy hexadecimal chart, visit my development page in Ren’ai Games and download the Hue Color Chart. If you need some other colors, you can open up images in your graphic software and usually, you should be able to see the hexadecimal value for the color.

The easier way to define colors is to type in the name such as red, black, blue and so on. This method is rather limited since only the major colors are defined. In the long run, if you want specific colors, you will have to get used to defining colors in the hexadecimal value above. Btw, hexadecimal values may be types in upper case or lower case. Letters used in hexadecimals are letters A – F and numbers 0 – 9. Personally, I prefer typing them in caps since it’s easier to pick it out that way. Anyways, to change the font’s color, use the color attribute like so:

<p><font color=”red”>This JUST In!!!!</font><br>We are now having a HUGE, <font color=”#00FF00″>Blowout</font> Saaaaale!!!!!</p>

Pretty neat huh? To make that announcement even better, you could change the size of the fonts. As with links, you can set it in relative terms or in absolute terms. In relative terms, the font will change size basing on the current font size already used. If standard text size throughout the site was 12, then in relative terms by using the + or – sign, you define the font’s size. For example:

<p><font size=”+3″ color=”red”>This JUST In!!!!</font>

This will make the font for “This JUST In!!!!” to 15. Using the negative sign, you can subtract from the current default text size. Personally, I do not like using this since many users have their browsers set to different font settings. Some have it a the smallest font size, some to the highest and most – everything in between. To have a little bit more control over how your site looks, it’s best to define the font size in absolute terms. This means that you specify a specific size like so:

<p><font size-”15″ color=”red”>This JUST In!!!!</font>

Like I said earlier, changing font colors is usually one of the biggest mistakes new web designers fall into. For one thing, it looks ugly when you have a myriad of colors swimming in front of you and for another, 9 out of 10, it won’t be readable. If you’re going to use color, use it sparingly and make sure the result is legible.

Changing Your Website Do’s and Do Not’s

There will come times when you want to re-do your website whether it’s a design change or updating to a CSS, PHP or CMS-driven site. I’ve done this multiple times throughout the years and there’s some things you should consider before you do anything:

1) Will the change benefit you? Will it make it easier for you to update? Will it make you site look more professional? Ask yourself these questions before you contemplate starting your project because doing something like this takes time.

2) If you think the changes will benefit you, ask yourself if you need to learn anything new. Do you have to learn some coding skills you don’t know? Will you have to install something yourself or not? If it’s something that you can handle, then it’s all good. Otherwise, if you cannot, try to find another solution or see if you can get some help whether it’s from your hosting provider or researching through books. Wait till you are ready to move on. This can be a big time-waster if you run around with no idea of what you’re doing.

3) Keep the new features to the minimum. Sometimes, we can get carried away with additions we want to make to the site. Try to keep it simple and only keep what you really need or have content for. If it’s something that people want in your site, they will contact you about it otherwise, don’t get too fancy.

4) Have everything done in advance before going live with the new design or if it’s a change to a CMS-style site, make sure you are ready to put in the time to re-build the content. Make sure you test your new design – no broken links, images show up properly, text is written right – before you update your site. And when you do update your site, make sure it’s at a time with the least traffic so your visitors will not be affected as much. If it’s something that till require more than one day, make sure you inform your visitors that changes will be made and will take time. Don’t be lax about bringing back content! It’s the bread and butter of your site. Without it, there’s not much reason for people to stay in your site.

Last but not least,

5) Keep all your old files and make backups. You never know when you need to look up something in it. ‘Sides, if something goes terribly wrong with the new site, you can revert to your former site with no problems.

Keep in mind that the larger your website becomes, the harder it is every time you change it unless you have it set up in certain ways. AS they say, “If it ain’t broke, why fix it?” ; )

Images, Links, Headings and Breaks, Oh My!

Before, I talked about the basics of HTML coding including some editing tags. This time, I’ll teach you how to add images, links, headings and breaks. First, lets start off with headings.

Headings are preset-sized text that indicate important titles for a body of text. The title of this article is a heading, for example. Headings are sized according to their importance. As you go down in number, the smaller the heading will be. Normally, the headings you will use are the following:

<h1> – the biggest of the heading sizes.
<h2> – not as big as the <h1> but it’s still sizable enough.
<h3> – a bit closer to the small side but not by much.
<h4> – this is close to regular size font or is regular size font.

You can bypass the preset sizes and making your own by using CSS (Cascading Style Sheet) but that that’s more on the advanced side so I will not cover it at the moment. Heading’s need a closing tag btw, so don’t forget to put those in. Also, headings are like <p> tags in that it automatically breaks a line after it.

If you looked at the heading tag list, you notice that they were single spaced not double spaced like if you used paragraph tags. To do that little trick, all you need to do is add this tag: <br> . This is HTML’s solution to just pressing the “Enter” button once. You do not need to close this tag. As with the <b> or <strong> and <i> or <em> tags, the break tag also has an alternate that is used: <br /> Either one will work.

Let’s move on to linking one page to another. Before we start, I suggest you make several pages you want to link to such as an About or FAQ page; a norm for most websites.

Quick Tip: to save time, a savvy web designer will create a template that has all the basic tags and settings all ready placed. To add new pages, all that needs to be done is to copy that template, rename it to the new web page, test it out, and it’s done!

When you’re ready to link, you need to set up an anchor tag; <a></a>; before and after the word(s) you would like people to click to get to the next page. Anchor tags, though require additional information for it to work properly. This is where attributes come in. Attributes are extra commands placed right after the initial tag that specifies extra information. In this case, anchor tags needs to know where it will link to or it will not go anywhere so it needs the attribute called “href”, short for hypertext reference. To use it, type it in like so:

<a href=”index.html”>Home</a> | <a href=”about.html”>About Us</a> | <a href=”faqs.html”>FAQs</a>

If you noticed, an equal sign plus quotes are used as well. Whatever is in the quotes is the address of the page it is linking to. Since it’s pages within your own site, you use relative links. If you want to link somewhere else in the net, you have to use absolute links that require the whole URL like <a href=”http://www.pixelpetunia.com”>Pixel Petunia</a> to get to Pixel Petunia. If your link doesn’t work, recheck everything and make sure none of the symbols (=, “, /, <, >) is missing or the tags and attribute is spelled correctly. Check your link as well and see if that isn’t the problem.

Another tag that needs an attribute as well is the image tag; <img>. Like the <br> tag, it doesn’t require a closing tag and stands alone. The attribute that the image tag needs also is to point where the image is coming from, “src”, or source. It works like the anchor tag and can call images locally or non-locally.

<img src=”images/header.jpg”>

You can also change the location of the image by using the align attribute like so:

<img src=”images/funny.bmp” align=”left”>
<img src=”images/sad.gif” align=”right”>

Unfortunately, you cannot center align the image without using a <p> or <div> tag like so:

<p align=”center”><img src=”images/logo.png”></p>

If you’re going to center an image as shown above, make sure it is alone or else any text you type within that paragraph will also be center-aligned. Going back to the <p> tag, you can use the align attribute in it too to adjust your text’s alignment: left, right or center. If you do not specify an alignment, the default is left.

Regarding linking to images non-locally from your own domain, it is highly frowned upon! This is called bandwidth stealing. If you are linking to your other domain’s images, then that is alright but generally, do NOT link to other people’s images. For one, it’s stealing, 2) the image may be removed from the source at any time and can cause you problems and in some cases 3) the original image holder may just put in a picture that will embarrass you (images ranging from poop to words that say that the linker is a bandwidth stealing loser).

With that said, there should be enough that you’ve learned to make your site snazzier!

How to Add a Favicon to Your Site

A favicon is the small graphic icon that appears next to your web address on the address bar, at the tab of your site, and the bookmark of your site. If you look up, you’ll see WordPress’ favicon, a “w” within a circle.

This little icon is a quick way to give your site distinction. For one, it makes it easier for people to associate your site with an image and if they had to, it’ll be easier for them to pick it out among a list of bookmarks. Sites without a favicon have the generic paper with dog ears. Rather forgettable huh?

To make your own favicon, you first have to make your own image. If you have Photoshop, you can get a free plugin called ICO which allows you to save your image in an ico format used for icons. If you do not have Photoshop, you can get this free icon editor called XN Resource Editor.

Now that you have the means, create a 16×16 icon, the standard size for all favicons. I suggest you pick the most prominent image of your website and turn that into your icon. If you change your mind later on, it can be redone but if your favicon has already gone live, most people have already begun associating that image with your site so be really sure you want to make the change. If you still go on with the change, associate it with something like a new look for your site or special event.

Next, open up your index page. At the head, enter this code:

<link rel=”shortcut icon” href=”favicon.ico”>

Though you can choose to place your favicon in any folder, I suggest you place your favicon file in the root directory. It is automatically the place where browsers look for a favicon even if you didn’t add coding to your site. (Adding code just makes it easier for the browser to find it.)

Once you’ve done that, upload your index file and favicon. Check out your site to see if it’s up and you’re done! :3

Ideas Galore: CSS Drive

This article was originally posted in my old and now defunct blog on February 10, 2008. Original text is italicized.

Another website that’ll help you get inspired with your CSS skills is CSS Drive. This site has tons of examples and has a community too which is extra helpful for the inquiring sort who wants to learn.

One of the examples that literally sparked my creativity is the Meomi Cloud House. This website is absolutely gorgeous! There’s many things going on but the content is neat and fits in with the whole design. The animations were done with Flash but I think you can exchange those with good ol’ gif animations if you don’t have access to that program.

All in all, have a looksie and get creative! :3

They also have templates you can use, meaning you can take that design and if you’re familiar with HTML, fill in your own links and text and upload it to the net. If you know CSS, you can take it a step further and customize your colors and graphic design.

The Basics of HTML

Learning HTML is fairly easy. There’s just two rules you have to remember:

1) HTML tags must be closed and
2) HTML tags must be closed in order

Before I go on with those two rules, an HTML tag is a word or set of words placed within the less than and greater than characters like so: <p>. All HTML tags are in that format and if you reverse the order – >p< – it won’t work. To close a tag, you have to use the opening tag but you must place a forward slash in front of it: </p>. To create the basic HTML page, open up Notepad or Wordpad and type the following code:

<html>
<head>
</head>

<body>
</body>
</html>

Once done, save the file with an html extension such as “index.html”. Index pages is the first thing that a browser loads up when accessing a website. You may have noticed that some sites use a shortened “.htm” extension. This works just as well as the .html extension so either extensions will work. Just note that if two index HTML files are loaded into the same directory, the index file with the .html extension will most likely be the one loaded by the browser.

Going back to the code I made you type out, the <html> tags tells the browser that the document is an HTML (Hyper Text Markup Language) file and it will execute it as such. What it displays is the result of your coding. If you were to load the file above, you will see an empty web page. That’s because there’s nothing in there but the very basic format of an HTML file.

Next, the <head> tag is much like the header of your document. This is where information about your web page resides such as the title (<title>), links to style sheets (<link>) or scripts (<script>), and meta (<meta>) tags that dictate the author of the site, keywords, description and other information. Meta tags and link tags (for style sheets, for example) do not need a closing tag.

The <body> tag is where all the things you see on a web page goes from images, text, and so on. There is also a footer tag that you can place after the body tag but it is hardly used and from my experience, you don’t need it. Below, I have a list of tags you can place in the body along with their explanation. Place some in your HTML document and see what they do!

<p> – This tag starts a new paragraph. It automatically creates am empty line between it and the previous tag.
<div> – A division tag. Unlike the paragraph tag, this does not automatically create a space before it. This tag is highly used when using CSS (Cascading Style Sheet) for it’s flexibility.
<b> – The original editing tag used to bold fonts. This tag has been updated to <strong> which is more commonly used in web sites nowadays though the <strong> tag is still recognized for backwards compatibility.
<i> – The original editing tag used to italicize text. Like the <strong> tag, the <em> tags current incarnation is <em> which is short for emphasis. Either tag versions will work.
<u> – An editing tag that is used to underline. Links are generally underlined so using this tag is not as widely used and if you do use it, use it sparingly because underlined text can easily be mistaken for links.

Now that you know what an HTML tag looks like and how it works, let’s get back to the two rules I mentioned.

I. HTML Tags Must Be Closed
Almost all HTML tags have an opening tag and closing tag (example: <p></p>). There are a few exceptions and those are tags that mainly reside in the head of an HTML file as I explained earlier. If you forget to close a tag especially one of the editing tags (i.e. <i>, <b>, <u>), the remaining text from that tag and onwards will be in that style. When you get to more complex HTML tags such as tables, it can easily ruin your whole web page.

II. HTML Tags Must Be Closed in Order
This rule is just as important as the first one. If you don’t close them in order properly, you can wind up with a page that doesn’t look right. For example, if you want to bold and italicize a set of text, you have to open and close them like so: <b><i>Luke! I’m your father!</i></b>. This is a no-no: <b><i>Luke! I’m your father</b></i>.

But don’t listen to what I say, try it out for yourself and see how it works. Here’s an example HTML file you can start with or compare.

<html>
<head>
</head>
<body>
<p>Hello world! </p>
<p>For some reason, that is the <i>first</i> two words most coders write when starting to learn a programming language. Now for something completely different:</p>
<p><b>n_____________n</b></p>
</body>
</html>

Btw, you can capitalize your HTML tags or leave them lowercase as I do. They will both work either way. :)