To the Guild
To the Website
Ready to learn some stuff about HTML? So what would you like to learn about first?
The Basics
Links
Graphics
Text/Fonts
Tables
Coming Soon:
Marquees
Buttons
Music
Textareas
More to Tables
NOTE: the symbols I use for the code on this page...‹›...are fake symbols and will not work in real codes. This is because the real ones will not show up on the page. You can copy and paste but you will need to re-type the symbols by hitting (shift)(comma) and (shift)(period).
|
So, you want to learn the basics, eh? This is just a general description on how to put a code together:
Every code that you put in is called a tag. every tag has a left and right angle quote on the ends...like this ‹tag›. Lets say that you want to have your font in bold. You would type something like this:
‹b›FONT HERE‹/b›
The tags get more complicated as you go but you always have the start tag and the end tag for everything.
You have simple tags (like the one above), but what happens if you want to use more than one tag on the same text? You have to remember that whatever you start with is what you end with. So to make something underlined and bold you need to do this:
‹b›‹u›FONT HERE‹/u›‹/b›
Please keep in mind that it wont show up like mine is on the page...I have to use a special code to get the tags to appear. ;)
The next part that you need to learn is properties. For instance, the ‹font› tag. You can't just type ‹font›‹/font› and expect that it will change the color or font. You have to put in what you want...so how do you do that? like this:
‹font face="verdana" color="red"›FONT HERE‹/font›
That it. You put the name of the tag follow by the attributes (like the face and color) and then how you want each attribute to change.
If you have any further questions about how HTML works please contact twilight_assassin for help.
Top of Page
|
Basic Links
Links use the ‹a› tag. To make a word link to another page you need to have the URL of the page. Here is how it works:
‹a href="URL HERE"›CLICK‹/a›
That's it so if you want to link to www.neopets.com then you will put that in for the url.
Email Link
Here is how to make an email link:
‹a href="mailto:NAME@EMAIL.COM"?subject="STUFF"›EMAIL ME!!‹/a›
The '?subject=""' part is to fill in the subject line of the email. You can remove it if you want.
Image Link
You can also use an image to link to other pages. For this you need to have the URL for the image. You get it by right-clicking the image you want and clicking properties. Here is an example of a linked image:
![](http://images.neopets.com/neoboards/avatars/zafara.gif)
The code for this is ‹a href="URL OF LINK›‹img src="URL OF PICTURE"›‹/a›
To find out more, check out CSShelp's page to change link color and style. (since this is an HTML help page I'm not going to go through CSS :P)
Internal Link
An internal link is a link that will go to a certain part of a page. For instance, the "Top of Page" buttons at the bottom of each section. You need to put two codes in for this. You put in the link in (typically at the top of the page, like my menu.) Lets say that we want to link to the word below that says "Hello!" This is what you would write:
‹a href="#hello"›LINK NAME HERE‹/a›
‹a name="hello"›Hello!‹/a›
You can put in anything for the "a name=BLAH" part. It could be one letter or 10. But the "a href=#BLAH" must have the number sign and match what the "a name" is. So if the "a name" is dude then the "a href" must be #dude.
Top of Page
|
BG Color
It is possible to put a background behind your text... like this.
To do this you need this code:
‹span style=background:COLOR›TEXT HERE‹/span›
Wavy Text
Making your text wavy is fairly complicated.WAVY TEXT EXAPLE
Here is the code for it:
‹DIV ID="waveText"style="width:NUMBER HERE;
height:NUMBER HERE;font-size:15pt;color:COLOR;
filter:wave(add=0,phase=4,freq=5,
strength=2)"›TEXT HERE.‹/DIV›
Complete the code by adding a number for the width, height, color, font-size, and strength. The example above has a width of 40, height of 20, font-size 16, color of crimson strength of 2.
Spacing Letters
To space letters you need this code:
‹h3 STYLE="LETTER-SPACING:#em"›TEXT HERE‹/h3›
THIS TEXT HAS A SPACING OF 1.
You can change the h3 to anything between 1-6 and the # to how ever far you want the letters spaced :).
Text Formating
There are many things you can do to get text to act different than it normal does when you just type it in. You can use breaks and paragraph codes. They work like this:
The ‹br› code moves text to the next line...
Like this.
Yo make text move down to a new paragraph you use ‹p›...like this.
These codes do not use end tags. That means there is no ‹/br› or ‹/p›.
You can also move text to different areas...such as right left and center. The ‹center›‹/center› tags will center your text.
Not putting anything in will leave your text on the left, like this sentence. To move your text to any of those directions as well as right you can use this code:
‹p align=LEFT,CENTER,RIGHT›TEXT HERE‹/p›
Only use one of those three directions to make the code work.
- To indent your text...like this sentence is, use this code:
‹dl›‹dd›TEXT HERE‹/dl›
Top of Page
|
Basic Tables
Tables can get confusing at times, but the thing that you always need to keep in mind is whatever tag you start with is the one you end with. Here is the basic table code:
‹table›‹tr›‹td›WORDS HERE‹/td›‹/tr›‹/table›
You start with the table tag so you end with the table tag. Another way to say this is that whatever order you start with, you need to go in the backwards order to end it.
Understanding Tables
You understand that the "‹table›‹/table›" part starts and ends the table itself. But what is "‹tr›‹/tr›" and "‹td›‹/td›?" ‹tr› or TR is the Table Row which is easy enough to remember. The rows go across the table. TD means Table Data...that is a cell or where you put your TEXT for each section.
Here is a table that has two rows and two columns:
‹table›‹tr›‹td›TEXT‹/td›‹td›TEXT‹/td›‹/tr›‹tr›‹td›TEXT‹/td›‹td›TEXT‹/td›‹/tr›‹/table›
Here is the code for that
Lets say that you want to make a table that has three rows and one column. Your code would look like this:
‹table›‹tr›‹td›TEXT‹/td›‹/tr›‹tr›‹td›TEXT‹/td›‹/tr›‹tr›‹td›TEXT‹/td›‹/tr›‹/table›
invalid tag Changing Your Table
There are many ways you can change your table. You can change the background, boarder and how your words display in it. Here are two different ways to change the background...
Top of Page
|
‹›
|