Apple's Basic HTML Guide!
As most of you can imagine and/or have expierienced, some of the fabulous backgrounds we supply here at TGB don't work well with the plain old drab black font TNT supplies. So, with a little bit of HTML skill and these codes, you can make ANY lookup, layout, background, or anything else sparkle! This guide contains all you need to know for your baisc HTML knowledge, and will help you expand your HTML/CSS skills there forth! Oh, and this is a VERY IN -DEPTH guide, be prepared! This requires no programs, just a place you need to make look spiffy!
This is my first guide too, so be nice to me! apple@thegraphicbin.com I will probably have more, if this one goes well.
Text Editing
Everyone knows how irritating it can be when you have the prettiest background, layout, blog, or something of that nature, and when you try to type on it, it blends in with the background and no one can read it! So we're gonna fix this problem with a little magic and pixie dust! ;) First of all, you need to know the < and > symbols. They are pretty easy to find on your keyboard, below.After you've located all of those buttons, take note of them, for they are important in graphics. Now, the most basic font editing would have to be the 3 different styles of font. Bold , Italics , and underlined . In my opinion, these are the most easiest and basic text editing codes. In some computer programs, there are buttons to make the text bold, italics, or underlined, but unforunately most sites do not have that feature. So, we are forced to complete this task old-school. Experiment with these codes as you will:
BOLD TEXT
ITALIC TEXT
UDERLINED TEXT
Now, moving onto the Font Sizes. There are indefinite sizes, but I recommend only using sizes 1-5. These codes are akward to post, so experiment with these codes as you will:
TGB ROCKS!
TGB ROCKS!
TGB ROCKS!
TGB ROCKS!
TGB ROCKS!
Another big step is Font Color! This helps your text stand out! I cannot post all of the codes for the colors, also known as hex codes. Hex codes are numbers assigned to a certain color. For a very in-depth hex code chart, visit the TGB Hex Color Chart. Experiment with these codes, inserting the hex code where it says INSERT HEX CODE. Be sure to always add a # in front of the hex code!
PRETTY IN PINK
SNAZZY IN PURPLE
Now that that's taken care of, onto the more complex features. First, we'll learn how to make text scroll. This is relatively easy, and can really add an extra SPARK to your page. Here's an example:
Play around with that code. Now, see how easy that was?
Now, we'll learn how to cross out your text. Some have asked "What's the point when you can just delete it all together?" Well, this makes your page look more professional, and professional pages look a lot better than unprofessional pages, catch my drift? The only thing with this code is that there are 2 codes for this; A code for Neopets, and a code for everything else. Now, here's an example:
Code for Neopets Pages
Code for Other Pages
Also, you can change your font type! It's quite similiar to the font color and font size codes. For example, if you don't want Georgia text, and you want Times New Roman, this code will help you do just that. Play around with this code:
Times New Roman
Arial
Georgia
Comic Sans MS
Courier
Breaks and Paragraphs
These are also qite important. To insert a break is like pressing "ENTER". In simple terms ;) The number of times you enter this break (the code is in the little box) is like pressing "ENTER". So, entering this code twice is like pressing "ENTER" twice. Example:Oh, look!
Get it? The really cool thing about this code is that you don't have to put an ending code!
Experiment
with
it.
Now that breaks are explained, let's try paragraphs. These are quite easy too! It turns your muddled text into a neat and nice paragraph. Experiment with this:
Oh, and before we move on, centering your text is helpful too! I am not sure how to explain it, so I am letting you go out on a limb. Write a couple of sentences with this code:
Images and Link - Back Pictures
This is ever so important, as this is really cool. This part of the guide will teach you how to insert images and make your images be a link when you click on them. So we are going to be using a TGB link back button.
The code for this image is as follows :
Study that code and you should catch on. The only thing I would like to add again is that the ONLY place you put the image code is in between the " and " marks.
Now, this would be a good time to introduce links. The code is below.
Between the " and " there is text that says URL HERE. That means in between the " and " you'd put the address of the site you were trying to link to. Then where it says TEXT TO BE LINK HERE is the text the viewer will click. Just type in the name of the site you are trying to link to in that space. Note that on Neopets, you can only link to Neopets sites.
Making an image a link is fairly easy. Take the TGB Link back code, for example.
The code for this image is as follows :
Now the image is a link back to the TGB homepage. Yay!
Done! Easy as that! All you do is place the Link code right next to the image code! Yay!
So, Now What?
Now you have a newly - found sense of HTML knowledge! All you need to do now is get on out there and make your fantastic web pages look SPIFFY! :)Since this is my first guide, why not e-mail me some of your feedback? Send me some links to the pages you made spiffy with this guide? Any suggestions on a new guide? All are welcome! I hope you enjoyed this guide, and I hope it helped you out!
