Welcome to c0dinghelp... Heres what's happened over time...

January 4th: Got more links on the right up, took me a while... will get the others momentarily. Added the background section as well. Back to school tomorrow so will have a lot less time to update the page January 2nd-3rd: Did some editing, changed the font to make it easier to read. Now have the images section up.... along with another to help with making images January 1st: Got the text section up now...check it out! December 31st: Got the basics section up now... enjoy. December 29th: Did a bit these past three days, decided on my character and got the intro up... Affiliates and Link back are now up December 26th: Finally got the layout finished and everything functioning. Going to add a character to the site, deciding on how to do that. Probably going to make it step by step guide. December 22nd: Finally decided on the links style I am going to use. Started the actual layout, going to change it tomorrow. December 20th: Started the new layout. Got the major things done. Finally decided on my top image.

Hello! I'm Jake and I'm going to help guide you through this site. We're going to take you step by step through creating your own layout! If you have any questions or suggestions, you can Neomail Me and I'll try to assist. Warning!: Before you start any layout, I highly advise you to open up a notepad on your computer by going to Start>All Programs>Accessories>Notepad. Do all of your coding in there and make sure you save frequently. This will prevent any accidents where you lose all your hard work either due to computer issues or neopets.

First things first, you need to learn the Basics. In other terms, you need to learn to walk before you can run. So, where should we start? Well, of course, there's going to be a lot of codes on this page that you need to copy. So, we'll start with copying and pasting. To copy you highlight the text by clicking and holding the mouse while dragging it over the text you want. Once its highlighted, you right click and click copy or you can hold down ctrl on your keyboard and hit c. Next to paste it in the appropriate area, right click and click paste or you can hold down ctrl on your keyboard and hit v. Try pasting the text from the first box into the second.
Copy: Copy this text and paste it in the second box!	Paste:
If you got that to work, congratulations, you're ready to move on!

Ok... so now that we got you able to copy and paste, we'll move on to text. Text is basically one of the easiest things in coding and will let you display your information to your reader, so let's learn how to decorate it. The following are basic HTML codes to help you edit your text.
Bold Text	<b>Your Text Here</b>
Italicized Text	<i>Your Text Here</i>
Underlined Text	<u>Your Text Here</u>
Subscript Text	<sub>Your Text Here</sub>
Superscript Text	<sup>Your Text Here</sup>
Strikethrough Text (Does not work in lookups)	<strike>Your Text Here</strike>
Alright, now that you can edit your text a bit, we'll work on how to separate the text. To do this we can either start a new line or a new paragraph. To make a new line you type in <br>. This is basically like hitting the enter key. To start a new paragraph you type in <p> and to end the paragraph you type in </p>. Here is what they do.
Code: First Line<br>Second Line<p>Paragraph 1</p><p>Paragraph 2</p>	Result: First Line Second Line Paragraph 1 Paragraph 2

Now that you have the text down, let's learn about something a little more complicated, Images. First of all you are going to need to have an image to put up. So, lets start with an image that is already available to you. Below, you will see an image of me. So, right click on me and click properties There you will see the part that says Address (URL): Copy that url and paste it in the first box. Compare it to the second box and if they are the same, move on.
	Box 1: Box 2: http://i510.photobucket.com/albums/s345/heza_5/char2.gif
Ok, now, do you know what will happen if you just paste that url into your page? Nothing. The image wont show up and all you will see is the URL. So now we'll work on actually making the image appear. Well, you're going to need to paste it into the code that follows, replacing URL.gif. Try matching the two boxes again.
Box 1: <img src="URL.gif">	Box 2: <img src="http://i510.photobucket.com/albums/s345/heza_5/char2.gif">

So, now that you know how to put an image on, how about we make one? Well, there are a few guides out there to making an image. Eventually, iGraphixs page will be one. To get you started, there already is an image editing software on your computer called Microsoft Paint. Go to Start>All Programs>Accessories>Paint. From there make a basic image to start off with. If you need help search for a guide. Once you make your image, you're going to need to upload it to an image hosting site. There are a few out there such as photobucket and tinypic. (These are well known and allowed to be discussed by neopets). So, upload your image there and obtain a direct link. Once you have that, again paste it in the following code.

<img src="URL.jpg">

If you recieve an error here are the most common issues: Not including both quotations around the src and Not using a direct link(it should take you directly to a page with just the image)

We've worked on the content now so how about we work on what's behind it? The background. Backgrounds can be positioned in all different ways and can be coded to appear how you want them to. First choose a background image and get the url for it. For this example, I'll be using me. Directions: Take the background attribute codes that you want your background to have and paste it in the last box where it says PASTECODESHERE.
Content Content Content Content Content Content	Background Image: background-image:url(urlhere.jpg);
Content Content Content Content Content Content	Colored Background: background-color:red;
Content Content Content Content Content Content	Fixed Background: background-attachment:fixed;
Content Content Content Content Content Content	Non-Repeating Background: background-repeat:no-repeat;
Content Content Content Content Content Content	Horizontally-Repeating Background: background-repeat:repeat-x;
Content Content Content Content Content Content	Vertically-Repeating Background: background-repeat:repeat-y;
Content Content Content Content Content Content	Centered Background: (add the non-repeating code as well): background-position:center;
Content Content Content Content Content Content	Top Right Background: (add the non-repeating code as well): background-position:top right;
Content Content Content Content Content Content	Bottom Left Background: (add the non-repeating code as well): background-position:bottom left;
Content Content Content Content Content Content	Bottom Right Background: (add the non-repeating code as well): background-position:bottom right;
Replace PASTECODESHERE in the code beside this with the background attribute codes that you want.	Code: <style /> body{PASTECODESHERE} </style />
Confused? I'll show you an example. For this box I want a background that's non-repeating, has a red colored background, and is positioned on the bottom right. So I'm going to copy the codes for Background Image, Non-Repeating Background, Colored Background and Bottom Right Background and I'm going to put them in place of PASTECODESHERE like so:
Content Content Content Content Content Content	Resulting code: <style /> body{background-image:url(http://i510.photobucket.com/albums/s345/heza_5/char5.gif); background-repeat:no-repeat; background-color:red; background-position:bottom right;} </style />

Now that you have the basic setting for your layout lets move on to scrollboxes. Scrollboxes are just styled divs that are set to scroll when overflowed. They can be styled and positioned to your likings and I'll show you the basics.
Basic Scrollbox Code: (Adjust attributes accordingly)	<div style="width:100px;height:100px;overflow:auto;">Enter enough text here to exceed the div's limits.</div>
Scrollboxes are just overflowed divs and so this is the basic scrollbox for you. Notice the attributes Theres width:100px; which is the horizontal length of the box. There is height:100px; which is the vertical length of the box. And there is overflow:auto; which tells the div that if the content exceeds its width and/or height to allow it to scroll. Adjust the numbers to the height and width accordingly. Want to get more advanced? Well, that will all be included in the div section as they are a whole different mass of information themselves.

Now we are actually going to start learning about coding and how it works. I'll try to explain it the best I can but please bear with me as it gets confusing. First I'll explain HTML. HTML stands for Hyper Text Markup Language. What that means? I don't know its just a name for coding . Anyways HTML goes outside of your style tags. It's the actual commands that enact your styles. For example the bold code, <b>, is an HTML tag. HTML tags are in your main content section. Some of the HTML Tags I will put below. You can find all the text HTML tags in the text section.
Div: (defines a division or section)	<div>Content</div>
Font: (specifies font color, size, and fontface)	<font color="red" size="4" font="Tahoma">
Table, Tr, Td: (Defines HTML Table, Table row, Table column)	<table><tr><td>1st Row 1st column</td><td>1st Row 2nd Column</td></tr><tr><td>2nd Row 1st column</td><td>2nd Row 2nd Column</td></tr></table>
A href: (defines a link)	<a href="URLHERE">Linked words</a>
Textarea: (Displays codes, replace - with _)	<text-area>Code here!</text-area>

The other type of coding I'll talk to you about is CSS. CSS stands for Cascading Style Sheets. Did those words fly right over your head? Well, yeah, it's common. Basically you set up a series of styles that defines the layout and how it shall appear. Once you get into making more advanced lookups most of your layouts attributes will be done in CSS. It's set up in a special way. First you have your beginning and closing style tags which are <style /> and </style>. (On websites besides neopets it's just <style> and </style>, the space and the slash gets your code past the lovely neopets filters.) Between the style tags you have a series of attributes that you want to apply styles to. Some of these are: b, table, td, body, a, and etc. After the attributes you list the styles inside of two curly brackets { and }. The following are some styles you could add:
Absolute Position: (sets attribute to be positioned exactly where specified)	position:absolute;
Relative Position: (sets attribute to be positioned relative to another item)	position:relative;
Top:#px: (sets the number of pixels the attribute should be positioned from the top, replace 0)	top:0px;
Left:#px: (sets the number of pixels the attribute should be positioned from the left, replace 0)	left:0px;
Color: (sets the color of the text in the attribute, replace red)	color:red;
Border: (sets the border to be set around the attribute, replace 2px red solid)	border:2px red solid;
Text-align: (sets the alignment of your text. Use left, right, or center)	text-align:center;
Font-weight: (sets the font-weight or boldness of your font, 400 is normal, bold is bold)	font-weight:bold;
Width: (sets attribute's width, replace 0)	width:0px;
Height: (sets attribute's height, replace 0)	width:0px;
Scrollbar-base-color: (sets the base color of the scrollbars, replace red)	scrollbar-base-color:red;
Text-decoration: (Adds decoration to your font, to get rid of preset decorations use none)	text-decoration:underline;
More Attributes will be added in other sections but I used that to get you started. Now for an example, I'm going to add styles to the attribute b. This way whenever I use the command <b> These styles will be applied. I want the bold words to have no boldness, text color of red, and a border blue 2px dashed. So, I'll do my style tags, define b, and between the brackets place the codes for color, font-weight, and border.
How it will Appear	<style /> b {font-weight:400; color:red; border:2px blue dashed;}</style />
So, I hope you understand CSS better to some extent. Most of my coding will be in css from here out to help organize your code better.

Now that you know the basics of CSS and HTML we can move on to making divs which are divisions or sections of your page. First to demonstrate what these are we'll use c0dinghelp for an example. If you look around at the top of my page you'll notice that I have different sections. I have the top section where I placed my top image. I have the links section where I place all my links throughout the page. And I have my main section where all my content goes. Notice they are all positioned to a specfic place and have specific qualities. Lets first explain how to edit div styles in CSS. In styles you can either define styles of a class of div or id a div. So, what's the difference? Basically they appear the same way but id's can only be used to define a div once. Any more it may not be recognized in some browsers. So if you want to apply styles to more than one div you would use class. In basic terms id=once and class=more than once. To define an id you would use a number sign (#) in front of the name of the div and to define a class you use a period (.). Then you can add all your styles in between the brackets. Here's two examples:
Div Class Name = mybox Div Class Name = mybox Div Class Name = mybox	<style /> .mybox {width:200px; height:100px; overflow:auto; color:black; border:black 2px solid; font-family:eurostile;} </style />
Div ID Name = mybox Div ID Name = mybox Div ID Name = mybox	<style /> #mybox {width:200px; height:100px; overflow:auto; color:black; border:black 2px solid; font-family:eurostile;} </style />
Understand now? It's pretty easy and can help you set things at different places accordingly. Just add the styles you want to the code. This way you can position your section where you want by using the position:absolute; code and set it up with the width:0px; height:0px; top:0px; left: 0px; overflow:auto; codes. Good luck!

Affiliates
Find this page helpful?? Why not link back and help me out!
<a href="/~c0dinghelp"><img src="http://i510.photobucket.com/albums/s345/heza_5/linkback-1.gif" border="0"></a>	<a href="/~c0dinghelp"><img src="http://i510.photobucket.com/albums/s345/heza_5/cred.jpg" border="0"></a>

Awards: