¦Basics¦ ¦Text¦ ¦Fonts and Color¦ ¦Color Chart¦ ¦Bullets and numbers¦ ¦Images¦ ¦Positioning¦ ¦Backgrounds¦ ¦Create a link¦ ¦text Boxes¦ ¦Html code box¦ ¦Music¦ ¦Hover images¦ ¦Navigation bars¦ ¦Color Scroll bars¦ ¦Links and Credits¦ Welcome to my tutorial. Please keep this in mind; To Make the brackets appear on the page I had to leave spaces in between them and the Text. To use the codes remove the gaps in the the code. Oh hello there. My name is Christophor, but you can call me Chris. Welcome to my little page under the sea. My page is all about Html. What is Html you say? Well it's something that many people have trouble understanding but its really quite simple. Html is what makes up web pages and what most people use for their petpages to make them more unique. You can add pictures, backgrounds, text, and even links to other pages. Still don't quite understand? Well with this page I will teach you everything I know to help you learn and soon make your own pages. Lets start off with a little of the basics. For one do you know what HTML stands for? It stands for Hyper Text Mark-up Language and is the code that nearly all web pages are written in. Even though the name is complicated the actual code is very simple. Before you can start learning HTML there is one main thing that you need to Know: All commands are typed within triangular brackets < >. These are called tags. When you type something between these tags it means you want to start a command. When you want to end a command you need to end the tags. To end a tag you type . That is you add a / after the first bracket. An Example of an end tag would be: < b >a word< /b > This would make a word display in bold on your page. As the tags are ended then everything after "a word" will not be in bold. Most web pages are made up of text. To type something into your webpage simply type what you want to show up. You only need to use tags if you want the text to do something special. Some common tags to make your text look different are: Thanks to Neo Help page for the table < b > this bolds text < /b > (you need to end this) < br > inserts a line break (like pressing enter on a keyboard) < p > This starts a new paragraph this is very useful for splitting up your text < I > This makes text in italics < /I > (you need to end this) < u > underlines text < /u > (you need to end this) Font Size: You can also change the size of your font. In HTML the sizes range from 1 (very small) to 7 (very big). To change the size of your font you type: < font size=1> type your text here < /font > You must end your font tag or all text typed afterwards will be that size. These are the different size fonts that you can use: Size 1 text Size 2 text Size 3 text Size 4 text Size 5 text Size 6 text Size 7 text Now what if you want to end a paragraph or make a space in-between lines of text? This is one of the most used and useful codes not to mention simple. If You want to make a paragraph with a large space Like This, you simply put (no spaces) < p >; the "p" signifies "paragraph", so you are telling the computer and website to start a new paragraph, with an extra empty line in between. It is very useful and sometimes makes text much easier to read rather than having it all squashed together. To start a new line but not skip a line like this, you type without spaces < br >, which signifies "line break". It enables you to skip a line without an empty space, should you need to. You may not like the typical font that is standard on pages but what can you do to change it? To change the font of text is quite simple and uses a simple code. By using this code and the name of the font you want you can change the Text on the entire page or just a section of text. < font face=Arial > Here are some common fonts that you can use Papyrus Arial You can change the color of your font very easily. For the most frequently used colors you can use their name. e.g red, black, green, blue, gray, white. HTML uses American English spellings, if you want to change the color of something, you need to type color If you want to make a word blue you would type: < font color="blue" > text here < /font > and this would appear as text here. For more specific colors you may need to use a "hexadecimal"l code. This is the unique code given to each shade of color. All colors have a combination of 6 numbers and letters that represent an exact shade. You can find all the color codes in the "Color Chart" section If you want to change the font color and size you can do this in the same tag eg: < font size="1" color="000066" > type text here < /font > This would make the text small and blue, like this type text here. #FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00 #FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00 #FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900 #FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600 #FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300 #FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000 #CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00 #CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00 #CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900 #CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600 #CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300 #CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000 #99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00 #99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00 #9999FF #9999CC #999999 #999966 #999933 #999900 #9966FF #9966CC #996699 #996666 #996633 #996600 #9933FF #9933CC #993399 #993366 #993333 #993300 #9900FF #9900CC #990099 #990066 #990033 #990000 #66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00 #66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00 #6699FF #6699CC #669999 #669966 #669933 #669900 #6666FF #6666CC #666699 #666666 #666633 #666600 #6633FF #6633CC #663399 #663366 #663333 #663300 #6600FF #6600CC #660099 #660066 #660033 #660000 #33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00 #33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00 #3399FF #3399CC #339999 #339966 #339933 #339900 #3366FF #3366CC #336699 #336666 #336633 #336600 #3333FF #3333CC #333399 #333366 #333333 #333300 #3300FF #3300CC #330099 #330066 #330033 #330000 #00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00 #00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00 #0099FF #0099CC #009999 #009966 #009933 #009900 #0066FF #0066CC #006699 #006666 #006633 #006600 #0033FF #0033CC #003399 #003366 #003333 #003300 #0000FF #0000CC #000099 #000066 #000033 #000000 Bullet Points: Bullet points are slightly more complicated. In HTML bullet points are called unordered lists or ul for short. To start bullet points you need to type < ul >. You want each bullet point to appear on a new line so you type < li > before it. When you have finished all your bullet points type < /ul > The code would look like this: < ul > < li >bullet one < li >bullet two < li >bullet three < /ul > This is what would actually be displayed on your web page: bullet one bullet two bullet three Numbered Lists: Creating a numbered list uses the same principle as creating bullet points except you use ordered list < ol > instead of < ul >. The code for an ordered list would look like this. < ol > < li >point one < li >point two < li >point three < /ol > This is what would actually be displayed on your web page: point one point two point three Placing an image on a web page is rather simple. First of all, your image must be saved somewhere on the internet. There are a lot of hosting sites you can find that are free. Once you have your image hosted its time to put in on the page. These sites will give you a link to your picture. Take that link and Place it a code using "img" and "src" and use the tag brackets Together it will look like this: The image tag is special as you don't have to end it, which is all you need to type to display an image. Now when you look at your web page you should see your picture. There are several other things you can add into the code to make the image look better including the border tag. Using this you can choose what thickness border, if any you want around your image. Some basic borders are: Border="0" no border Border="1" thin border Border="2" thicker border You simply type in border="2" inside the tag after you have typed the location of your image, like so: This will now display your picture with a thick border around it. Positioning the image: You can also change where you want your image to be positioned on the page. The most frequently used ones are left, right and center. To make an image centered type this before the image tag: < div align=center > Everything typed after this will be centered so now you need to type your image tags. When you have finished your image tag and no longer want everything centered you simply end the center tag like so: < /div > To make something aligned to the left or right you use the same code just replace the word center with left or right. You can also make an image to the right or left of your text by placing align=left or right in after the Url. this is also another special code that does not require a ending tag. It would look like this Background color If you want to make your page more interesting you can change the background of the page. Background color works in much the same way as font color except it affects the whole page. Normally backgrounds are white (FFFFFF) or black (000000) but you can use any color you wish. To change your background color Simply type this near the top of your page. < body bgcolor="#FFFFFF" > or < body bgcolor="white" > Background Images: You can also make an image display as a background image instead of just having a solid color. This works well with light colored, simple images. It livens up the page, yet you can still read the text clearly. To display an image as the background you need to type: < body background=http://www.neopets.com/mypicture.gif > This will now display your image in the background. Now if you want the background to stay stationary when you scroll up and down the page requires an extra code after the image Url. Just type Bgproperties=fixed. It would look like this: < body background="http://www.neopets.com/mypicture.gif" Bgproperties=fixed > You can turn anything on your site into a link to something else. You can make links to each of your petpages, or lookups. You already know how to make images and text on web pages, turning that into a link is very simple. First you need to have a URL to link to, in this example I have used the Neopets url. I wanted to make the text click here link to www.neopets.com so the code would be: The only thing that will be displayed on the web page is the click here. This would now be click-able. When you click on it with your mouse it will take you to the Neopets URL. To make an image click-able you use the same idea but instead of typing the text you put the image tag. For Example: This code will automatically put a thin border around your image. To make this thicker or remove it you need to use the border tag. By doing this you can change the thickness or even remove it completely. Some border examples are: Border="0" no border Border="1" thin border Border="2" thicker border If you don't want to have a border around your picture you simply type border="0 inside the tag after you have typed the location of your image, like so: important neopets rule!: neopets web page will block any Url with the work "link" in it. When you save an image to be used as a link save the file as anything with out the word "link" in it. For example you can save them as Patch, Icon, Clickable and so on. Text boxes can be rather hard to do and it has a lot of options to it. For one you need to know what size you want it to be in pixels. In the code you can change the width and height of the box by making the numbers larger or smaller. A typical screen is 1024x768 pixels (some are larger or smaller depending on your settings or your computer screen type) so the text box normally isn't larger than that. The typical code is: < Center > < div style=" overflow: auto; width:500px; height: 600 px;" > Now there is one more thing you can add to your Text box if you understand what your doing. By adding position:absolute; top: 100; left: 100; after the = you can change the position of the box on the screen. This code is adjusted from the top left corner so the numbers will move is more or less pixels from the side depending on how large the numbers you add to it. The code looks like this: < Center > < div style="position:absolute; top: 100; left: 100; overflow: auto; width:500px; height: 600 px;" > If you want more than one text box like on this page you must end the tag after each box. Like this: < /div > If you've been on a well made petpage with a link back to them then you've seen the Code box. These handy little boxes let you copy Html codes for adoptable or links that you can put on your own page. These are really simple but you Must end the tag each time you use it. For this code you just put: < TEXTAREA > The Html code that you want to be copied < /TEXTAREA > Please Put a _ after the "text" to combine the words. It would look like this The Html code that you want to be copied For music you need to find a music hosting site like you did with images. These can be hard to find if your looking for a free one.The biggest problem is finding one with a lot of bandwidth. The best option is to use the neopets Game music found HERE. The code you can use for lookups, shops, petpages and gallery looks like this: < bgsound src=http://images.neopets.com/mp3/hasee_bounce.mp3 loop="infinite" > Just replace the URL in the code with the one provided by Neopets, and put it on your page. To make an image hover, to cover a normal neo circle image (example: _inferno13 with your own image is simple if you know what your doing. First off you need to make the image and host it on the web. If you want a Neo circle for the image just copy and draw over the one I have provided. Now for the code; copy the below code and replace with your own picture. You may have to mess with the coding for the location, which is decided by the following part of the code: MARGIN: -310px 230px -60px 67px Copy and paste it at the top of your pet lookup description < IMG style="FLOAT: left; MARGIN: -310px 230px -60px 67px" height=170 src="http://img247.echo.cx/img247/87/yourpicturehere1jh.gif" width=170 > To make an image hover on a petpage like I have done with the maraquan Shoyru and the Arkmite Is an extremely difficult to explained and code. I will not be covering it in this guide Navigation bars take two parts. One is the link that the person viewing the page will click and the corresponding part will tell the computer where to go. The first part you can put in a text box or anywhere on your page. this is the part the user will click < a href="#1" > Basics < /a > Be sure that you end that tag. In this code you can change the name and number to correspond to the second part of this code. This part you will put in front of where you want that link to go. For example if you want it to take you to the top of the page you just put it at the very top of your text. The second par looks like this < a name=1 > Basics < /a > See how the numbers match the fist link? Each time you want to link to a part of the page you use a different number. It seems simple enough right? For a scroll bar you just use the same code over and over by just changing the color name or number. You can use the code in the Text box Html to color your scroll bars or you can use this code: The whole code is rather simple. Just replace the #COLOR with the name or number you wish to use Here are some other HTML and neopet help sites. Neo Html Help Kitxoone's Code source Neopets.com "Getting Started" Tutorial, Link Back <a href=http://petpages.neopets.com/~Christophor> <img src=http://img355.imageshack.us/img355/2528/ht5gr.gif border=0></a.> Credits All Images drawn by Fatal_mantis2 Thanks to Neo HTML Help Thanks to Kaykaykit for the bubble brush.