| If you are totally lost neomail Nora2, and I'll see if I can help ya. |
| HTML stands for Hypertext Markup Language and it's the most basic language of web design. You can use it in Neopets to edit your Shop description, Pet Page, and Guild Layouts. Fore guilds and pet pages you can also use a language called CSS, and for your userlookup, you can only use CSS. If you do'nt know what CSS is either, take a look at my CSS page here! There's a lot of information here I've highlighted in blue the important words, you obviously wanted to learn or you wouldn't be here, so bookmark this page (Ctrl+D) and take it little by little, remember, it's a whole new language, it's confusing at first but it gets easier! Every piece of HTML code begins with < and ends with > These are called tags and they let the computer know that you're giving it a command. Within tags, you'll type commands that the computer can recognize. You must use and opening command and a closing command with most phrases, some however don't have to be closed. This means you'll have: <an html command>Something you want to edit or add<and a closing command> Font Basics: The parts of text you'll want to change are size, color, and face (face is the same thing as font type). When you put it all together the parts can be all mixed up but "font" must be first and the whole thing must be within the tags, like this: <font color=blue size=3 face="Arial Bold">Text</font> ~~~Notice, I put the face name in quotation marks " " because there was more than one word, if your command does not have more than one word (no spaces), the quotation marks are not necessary. You can make your font italic, bold, and underlined as well. By using the following codes: Italic - <i>Text</i> Gives you Text Bold - <b>Text</b> Gives you Text Underlined - <u>Text</u> Gives you Text Put it together and what have you got? <font size=3 color=blue face=Helvetica><b>Basic HTML!</b></font> The above code would make your text look like this: Basic HTML! Font Advanced: If you want the area behind your text to be colored use this code: <span style=background:color>Text Here</span> If you want your font to glow, have a dropshadow, or a regular shadow fill in the first blank with the word glow, dropshadow, or shadow. Then add a color to the second blank, and in the third blank add a number, 1-10. <table style="filter:_______(color=____, strength=__)"><tr><td><center>Edited Text Goes Here</table> Alignment: You can either align text to the left (what this page is), the right, or to the center. Open the below code before the stuff you want to be aligned, and close it after the stuff. <div align=center>Images, text, paragraphs, line breaks, links, whatever you feel like putting</div> The part that says "center" can be changed to either left or right. Adding Backgrounds: Every image on the internet has an address, called a URL, this address is used when "linking back" to the image, and if you want a background, that's what you do, right-click on an image you like, choose properties, copy the URL, and paste it into the below code. The word fixed locks the background, if you remove fixed (don't forget to delete the space too), the background will change location as the visitor scrolls down or up. <body background="URL" bgproperties=fixed> If you just want a color as your background, then use this code and pick your color <body bgcolor="color"> Separation: Do your images and text all run into each other? A line break seperates your text a little bit, at a time, like this. The code to use is: Text on your first line<br>Text you want on your second line<br>images too! A paragraph puts a big space between the lines like this the code is: <p>Text or image in the seperated section</p> ~~~You don't have to close a line break ever and your coding will be fine if you don't close a paragraph but you should. Links: If you want to post a link in your shop, it's simple! Merely open the link tag, and type in the URL - the part that starts with http:// and ends with .com (.org, .gov, whatever) - of the site/page you want the link to go, type the text you want to become the link, and close your tag! <a href="URL">Click here!</a> If you want to get fancy you can embed the link which means there's text around it. You can change the font properties too. <font color=blue>Click<a href="URL"><font color=darkblue>here</font></a>!</font> For you inquisitive people out there who are wondering about closing tags. I opened a blue color tag for all the text in the link, it remains open the whole time. Then I opened a link, used the word here, and then closed the link. Within this link I opened and closed a font property of dark blue so that the link would be more prominent. And then at the very end I'm able to close my opening font property so that the exclamation mark (!) didn't get left out. Marquees: Scrolly text! Yay, my favorite HTML effect of all! Lol, ok, this is the coolest thing you're going to learn on this page. To make your text continuosly scoll, you use the code <marquee>Scrolling Text Here</marquee> You can edit the font within the marquee tags, you can even make it a link if you want. You can also change the behavior of the marquee so instead of continuing to scroll it stops (slide) or it bounces back and forth (alternate). Put it together and what have you got? <marquee behavior="alternate"><a href="URL"><font size="3" color="blue" face="Jester">Scolling Text Here</font></a></marquee> Graphics: Thought I'd never get to this huh? It's easy really, very easy, you're going to use and image source code. You have a picture you want in your shop right? Well, right-click on it, highlight (drag your mouse across while holding down the left mouse button) the URL - the thing that starts with http:// and ends with .com (.org, .gov, whatever). Then use the keyboard shortcut Ctrl+C to copy it. Go to your shop and enter the following code into the description: <img src="URL"> Replace "URL" with the address you copied by highlight it and pressing Ctrl+V Extras: Sometimes images will have annoying borders on them, you can remove them by giving the border a value of 0, you can also thicken the border by increasing this value from 0-9. If you want someone to read something when they hover over the picture you add the command "alt" and the text you want. You can make the image a link as well. So put it together and what have you got? <a href="http://www.linkurl.com"><img src="http://www.imageurl.com" border=0 alt="Hover Text Here"></a> If you want to learn how to make a table click here! Well, that's it, that's all you need to know about html to have a cool looking shop on Neopets! I hope you understood all this and I hope you read this far, cause I worked hard on this page. If you feel brave you can continue on and learn CSS too! You use that language on your userlookup, remember? :-) If you're too brain-dead, come back in a few days! Bookmark this page, or link to me! |
 |
|
|
|
|
|
|
|
|
|
 |
|
|
|