Welcome!

Hello guest! & welcome to my newly renovated site, Recipes For Perfection. Now, what does that mean?
This guide is an application guide based around the HTML & CSS aspect of the application process, rather than the content.

This site is owned and managed by Melanie (crash531), and any updating, questions, etc. should be directed to her ;3

A Note From The Owner;;

*waves* I'm glad you could stop by! Whether you happened to stumble across my page accidentally or were linked here directly, this is my Application Help Guide.

I hope you find the grassy background to be calming and serene, as well as the theme throughout the page. Coding is uber stressful, I know. My hopes are though, that you'll feel a little more at ease after reading this tranquil guide c:

And I know, I know. There are kajillions of application help guides already out there. We don't need another one.
Ah, young grasshopper, that is where the world has deceived you.

You see, my guide does not focus on the content like every other application guide out there. My guide keys in on the coding aspect of the application itself, in hopes that you too can stand a chance against all those wickedly awesome coded applications.
Thank you to everyone who complimented my work and inspired me to do this. You guys are awesome ^^;

Moving on.

Sitely Information;;

So with this new knowledge and the desire for adventure, let's move on, shall we? You must be here to learn about HMTL or CSS aspects, and I'm here to help! (: You may have known this page to be previously known as "Melanie's HTML/CSS Application Help Guide", but that site was wayyyy too outdated and needed a renovation and major overhauling. Some code was obsolete due to the new filters and everything just needed a good, solid dusting. And WHABAM. Recipes for Perfection was born with the birth of my little Recipes *swoon*

Before we get too far ahead of ourselves though, there are a few thing I must say first and foremost:

Disclaimer:

This guide WILL NOT
• Guarantee you to get the pet you are applying for. It's merely a tool to help you have a better knowledge of coding.

• Go over the basic aspects of HTML/CSS. You need a basic understanding of each of these languages. If you need help, just mail me! (Links can be found around the site, or in the right column ;3).

• Go over the detailed part of coding. Such as, making bold words green, headers bigger or smaller, etc. This is strictly the placement of blogs and images etc.

NOTE: Don't steal any content that is not okay-ed by me. Some content you may use and tweak, claim as your own, etc. But please do not steal my work. If you do, I become a rampant report happy :x

Blah, Blah, Blah. Let's Code!

Alright, I hear you, I hear you. So. Let's get down to business.

Back To Top

Style Tags;;

First thing you should become familiar with are the style tags. This simply tells the browser that the coding you're putting in is CSS ;3

These are vital to make a pet page, much less an application. All your coding will go between these. Your content will go after the first style tag and before the ending style tag (the 2^nd tag).

The Position Tag

Next thing up for topic is that you won't be dealing with anything in between those style tags with this tutorial.
Say Whaaa?
I know, you are now panick-stricken. "But how will we go on?", you ask. Well, due to Neopets recent coding changes, the positioning attribute:

no longer is allowed between your style tags. Sometimes it manages to sneak past the monitors on some pet's pages, but the majority of those other times it doesn't. Too many CG's, I suppose. *shrugs* I dunno, but either way, we can continue without that pesky little line of coding up there ;3

Creating Links

Now, another basic element of CSS & HTML : the link. This means that when you click something that is (usually) blue & underlined, it will escort you to another page. How does this happen, you ask? By creating a link.
Now, in order to create a link, you must know the desired URL of the page you want to link to.
Next, we're going to take that URL, and create a link!

Now, see how there's nothing after that equal sign? Stick your page's URL in there, but be sure to add double quotes to it on each side. WHABAM. You now have a click-able link to that page!
TIP: You can change the CLICK HERE text, making it say anything you want. Well, within reason of the monitors, of course ;3

Creating Links With Images

Using the knowledge from the previous section, we can apply it to using images as links. Look at the code below:

See how where it says CLICK HERE? That is where you will place your image code:

Replacing http://images.neopets.com/
neoboards/avatars/default.gif with your image code. And viola! You now have an image that, when clicked, will take the user to a desired page (example shown below).

TIP: The default set to linked images is to have an obnoxious border around it. I hate that border. If you want to get rid of it, add this segment to your code:

So the final image code will be:
(Without a border)

Making our final linked image look like this:

You Are Now Entering The Intermediate Section;

The following sections incorporate the basics (which you just learned about) as well as common, basic CSS & HTML understanding.

Page Anchors...

This part is probably the most challenging part that I struggle with. Page anchors are similar to links, but a bit more complicated.
Now, using an example found on this page: the Back To Top page anchor. See how when you click it, it shoots you up to the top of the page? Thank you page anchors. Now, I'll try to explain how that works & how you can use anchors.
With page anchors, there is a link part, and a name part. The link part is what you click on to get to the name part.
Like, you click the link *Back To Top* to get to the name part (the top of the page), which is where the link part sends you to.
I think this is better explained through code x3

This is the first part of your code, the link part. You can change the word link to whatever word you want, just be sure there's no spaces in it. You can also change the text, Your Link To Wherever to whatever you desire, or have nothing in there at all. Next comes the tricky part.

Now, in the place where you'd like your link to jump to, you will put this line of coding. Again, you can change the text in the middle of the link, This Anchor Leads Here to whatever you choose.
NOTE: Make absolute sure that the words following -disallowed_word- & name= are the exact same. If not, your anchors won't work properly.
TIP: You can also put images in place of text to link to another spot on the page, which is explained under the section, Linking Positioned Images.

Back To Top

Creating & Positioning A Text Box

Alright, here's the part where you've been dying to get to. Creating a text box, and then positioning it where you would like it to go.
Say you'd like to create a text box, that's 100px to the right of the page, and 300px down. We can do that using the div tag.

TIP:The example used below can be found in the Test Drive Section. Need to jump there? Click [here]

Whoa, whoa whoa! Holy kau! What does any of that mean?!
Calm down ;3 We'll go over that now.
Alright, first thing is first. We'll break it down into pieces, so it's not so terribly upsetting ;3
NOTE: This code goes outside of your style tags.

Okay. This first part just tells the browser that we're creating a division on the web page, and we want it to stay where we assign it, hence the position:absolute; part.
HOLD UP You said we couldn't use that earlier?! This is true, but we can no longer use it in between the style tags. You can use it in this code whenever you'd like, and it'll do as you say because it is not between the style tags. Now, the next part:

That little line of coding tells the browser where to place your text box. If you'd like it to move down the page 50 pixels, replace the # with 50, being sure to keep "px;" in the coding ;3 Same with moving it left and right. 0px; means your text box will be at the very left edge of the monitor screen, & each pixel you add to the # will move it over one pixel right, respectively.
NOTE: Be sure to replace the # symbol with a number. Leave the px; after your number, too.
Next part?

That line of the code simply makes your text box wider or taller, respectively. Want a wider text area? Add more pixels to the number after the width: code. Taller? Add more pixels after the height: code.
NOTE: Be sure to replace the # symbol with a number. Leave the px; after your number, too.
Next...

This line isn't required, per se. But it is highly recommended. If you want your text box to scroll when there's no more room, then add this line. If you (for any odd reason) don't want your text to scroll, delete this line of coding.
And next, we have... the fun stuff.

That line of code makes your text box pretty! The first part, the background: # code, tells the browser what color you want the background of your text area to be. Want it to be transparent? Either delete this section, or put none; in place of #------;. Be sure to replace the 6 hyphens with a hexidecimal code ;3
Oh! And want to align your text in this text box? Just use add this little line in somewhere:

You can replace center with either justified, left or right, depending on what you want.
Let's not forget borders, now...

If you want a border that encompasses your text box, leave this line in. If not, delete ;3
Now, that solid can be replaced with either dashed, dotted, double, groove, ridge, inset, and outset. I won't explain all of those here, but you can experiment ;3
Next, see how there's that #px part? That tells the browser how thick you want your border to be. I recommend somewhere between one and three, but depending on what you fancy, it could be bigger.
After that is the #------ part. This is where you replace those six hyphens with the hexidecimal color code that represents the color you want.
And Finally...
Add your content, then end your text area with an ending tag:

That's the ending of the tag, which tells your browser you have completed that text box. Woo! That will position your text box for you ;3
NOTE: If your content is showing up on your page, but not in the right spot, check to see if it's placed in front of your ending division tag ;3

So Now You Can Position Stuff...

So now that you understand the foundations of positioning and creating a text box, you can use this information to position images, and even link to other things using these images.

Ever wonder how that splash page leads you to where it does? Or why when you click an image you end up on another page? Simple. Create a text box, insert an image, and link that image to another page.
Uh...? Confused? That's alright, as we'll cover that next.

Using The Previous Coding...

Now before, where it says content here, we would place our text, and for lack of a better term, content. The bulk of the application; why me, why this pet, etc.
But this time around, we're going to put an image there instead. Once you have positioned your box where you want it, put:

in place of content here. Looking pretty spiffeh, huh?
Well, what if I told you that you could make it so that when someone clicked your image, it would take them to a new page, or even a designated spot on your application?
*LE GASP* Is it possible? Why but of course ;3

TIP #1: If you're going to be positioning an image, I would recommend taking off the border line of code ;3
TIP #2: Also, you can make your text box 1px by 1px if you desire. It won't matter, as the text box will expand to the image's width & height.
I always make my boxes with solely images in them around 10px by 10px

Linking Images

Now, you know how to link images, by now, yes?
(If not, click the link below this section & learn)
Same concept, only adding another element: the positioned text area. Inside of you positioned text area, and before the

line of coding, you can stick this little guy in there:

Replacing http://www.neopets.com with the URL of the page you want to link to, and http://images.neopets.com/
neoboards/avatars/default.gif with your image URL.
NOTE: It is possible to use this same technique with page anchors. Just apply the section about page anchors, and respectively place it in the coding ;3

Linking Images
Page Anchors
Back To Top

El Fin!

Wow! Congrats! You have managed to complete my guide (or maybe revisit some topics). Either way, you are now one step closer to creating a spiffeh application!

I wish you best of luck applying, and if you aren't applying, & are using this as a resource for coding help, I thank you, and ask if you'd kindly take a button and stick it somewhere? ;3

Thank you!

I hope this guide has helped you in some manner, and if it has, I'd love to hear about it! I'm open to comments, feedback, questions, and anything of the sort.

Now, go out, and code!
c:

Back To Top

Secret Goodies :3

Below you'll find some of my personal favorite guides around the site.

Welcome!

Sitely Information;;

Disclaimer:

Blah, Blah, Blah. Let's Code!

Style Tags;;

The Position Tag

Creating Links

Creating Links With Images

You Are Now Entering The Intermediate Section;

Page Anchors...

Creating & Positioning A Text Box

So Now You Can Position Stuff...

Using The Previous Coding...

Linking Images

El Fin!

Secret Goodies :3

Links

Updates;;

I'm Listed In...

Affiliates:

Pre Mades

Test Drive, Eh?

Miscellaneous Items Of Importance :3

Questions? Comments? Concerns?

Link Back?

Farewell, ilendpetpets.

Credit: