Create your own site (HTML and CSS help)

So... You want to know how to create your own site, without knowing too much about HTML or CSS? Guess what, now you can!! Here, bringing you the one and only guide to create a site with just a few simple steps - the rest will be up to you.

How to start?
The one thing every good site needs is a hosting place. Now if you don't know your way around the internet very well, its recommended that you would start with your own NeoPets account (Don't have one?). Did you know you can create your own site for free, from the NeoPets host? All you have to do is go to http://www.neopets.com/edithomepage.phtml, or if you want to know where exactly is it located at - on the main bar, click on Pet Central. After the page finished loading - find the image tool bar at the top - and click on the Blue Lupes head. Then choose the NeoPet which site you want to use, and click edit. Delete all the current information you have there, save. Congratulations, you are now ready to start on your personal site!!

One thing that can be quite useful is knowing certain color codes. Now sometimes you might have to enter a 6-number combination with # in the start if you want your color to be more specific. But other times, just typing the name of the color would do, for example:
this is how dark blue color looks like,
this is how olive color looks like,
and this is how light green color looks like.

If you want to see more colors, click here.

Few quick pointers before we go on our way:
<br> this code has the 'enter' effect. <p> you can use this code to create a new paragraph (double enter). <b>this code would help you bold your text</b> <i>this code would help you italic your text</i> <u>this code would help you underline your text</u> You can also make your text turn to right, left or even center it if you use these codes: <center>this will center your text</center> <div align=left>this will leften your text</div> <div align=right>this will righten your text</div><br> And, the perfect font code to help you out when you want to change a certain sentence to look a different way from the whole page: <font face=verdana color=black size=1>Of course, you can choose how your font would look like any time by changing its style (face), color and size.</font> this would create text links on your page to link to a different page: <a href=htttp://url goes here>what do you want to say so it could link to</a> this would add an image to your page: <img src=http://image url here> Don't forget you can also combine all the above codes as long as all of them keep their normal status.

building a base using CSS
I'm sure you'd like your page to look all fancy and unique, don't you? Thats something you can do using CSS (Cascading Style Sheets).
This code is used to add a background to your page: <style type="text/css"> body{background:white url() here you can add the way your background would be setted on the page, if you want it to be 'fixed', 'no-repeat', or even position it at the 'bottom left' part of the page, you can!} </style> This code is used to change the scroll bar on your page (that rolling thingie you keep seeing on long pages - they gave it a name, and you can change its colors to!!): <style type="text/css"> body{scrollbar-face-color:steelblue; scrollbar-shadow-color:black; scrollbar-highlight-color:slateblue; scrollbar-3dlight-color:slateblue; scrollbar-darkshadow-color:slateblue; scrollbar-track-color:gray; scrollbar-arrow-color:black;} </style> This is the basic code to change all of the font in your page in to one color, one size and one face: <style type="text/css"> td,p,body{color:black;font:8pt verdana} </style> This is the code to change the color, size and face of the links on your page: <style type="text/css"> a:link{text-decoration:none;color:darkblue;font:8pt verdana} a:visited{text-decoration:none;color:darkblue;font:8pt verdana} a:hover{text-decoration:none;color:darkred;font:8pt verdana} </style> The best way to use all of the codes above is to combine them into one code that should look something like this: <style type="text/css"> body{background:white url() fixed} body{scrollbar-face-color:steelblue; scrollbar-shadow-color:black; scrollbar-highlight-color:slateblue; scrollbar-3dlight-color:slateblue; scrollbar-darkshadow-color:slateblue; scrollbar-track-color:gray; scrollbar-arrow-color:black;} td,p,body{color:black;font:8pt verdana} a:link{text-decoration:none;color:darkblue;font:8pt verdana} a:visited{text-decoration:none;color:darkblue;font:8pt verdana} a:hover{text-decoration:none;color:darkred;font:8pt verdana} </style>

Copy the above code, and paste it in your site. Now study it for a bit, it shouldn't take too long until you could get the hang of it and costumize it the way you want it to look like.

Uploading your pictures
See the url() part? thats where you can have your very own background!! If you have a place to upload your graphics in (and its a good idea to have one, as if you don't use a site on the web, even if you will get the right url - other people besides you wouldn't beable to see it, and thats a shame isn't it?) Now, a few good sites you can upload your pictures in are freewebs.com, fortunecity.com and ripway.com. You can even use the guilds msn group if you don't want to create your own account. A good advice is make sure your picture is either JPG or GIF - both of those extensions are the ones who take up the least space, although tend to damage the picture quality it would loud alot faster - which is alot of times a good thing.

Coding your pictures
Is your picture a background? to make it possible so the background would show up in shops, use this code: <body background=http://url of your picture here> to make it possible so the background would show up in look-ups, you can use the same code as given in the css code above. Is your picture a banner? to make it possible to show up, and link to the guild, use this code: <a href=http://www.neopets.com/guilds/guild.phtml?oid=violet345><img src=url of your picture here border=0></a>

Giving the code to your graphics
You can give out the codes for your graphics using a box thats called 'text area', it doesnt support HTML like a blog and therefore quite useful when it comes to giving away HTML codes.

<textarea rows=2 cols=9>insert html code</textarea>

Thats about it
Hope I didn't confuse you too much, and helped you out to understand a little bit more about HTML & CSS, and only show you the basics. If you'd like to learn more - you can check out one of the in-depth guide sites that are linked in the graphics site. I wouldn't recommened it until you would know these codes by heart though, at least the HTML ones. This guide wasn't enough? you want a premade site to help you solve your problems? then go right ahead and use the next code...