|
|
|
Navigation
Html & Neopets Be Firefox Friendly Be Resolution Friendly Font Basics Image Basics Link Basics Table Basics Text Area Basics Div Basics Marquees Css Codes
Counter
 |
 Let me start off by saying I believe anyone can learn html. It's mostly a matter of remembering the tags and having someone explain it to you really helps! The problem is with most html tutorials is that they just give you the code and don't really explain what each part does or what it means. That can make learning harder and longer. Well you won't find that in this guide! I'm going to try and keep everything as simple as I can and hope this will help out a few people on the road to doing things like coding their own lookups, and quite possible if they desire their own website! This is intended to get you started. There is much more to understand out there. Once you get the hang of these I suggest looking up w3schools to learn more! Top of Page
There are certain tags (codes) that you cannot use on your neopets pages. This is to keep you safe from people who would take advantage of people to steal their account information or worse things to your computer. There aren't a huge ammount of tags (codes) you can use, but with styles (CSS) you can change quite a bit of stuff! Imagine having a nice blog at the top of your user lookup or changing the text and link colors in your shop! You can even give your text or tables sparkley backgrounds and add matching images to personalize your pages.
No user scripting of any kind is allowed on this website! Top of Page
Consider for a moment that you want someone to rate your lookup that you slaved on for HOURS to get it to look just right. So you go to the boards and start a board, only to find your hard work bashed by all these firefox users who can't seem to read your info. It's not your problem they use a different browser right? WRONG!!!!!
It's much easier than most people think to get it to look well in both Internet Explorer AND Firefox. Generally if it works in these two browsers, it will look alright in opera and safari as well. Perhaps the easiest thing to do is download firefox yourself and use it to check your code. But if you really don't want to do that, you might find a friend who's willing to look at it for you. Here are a few quick fixes that I've found most people asking. Fixing Covered Stats/Stats not in scroll box Go to the very bottom of all your coding and put: When you get it completed be sure to ask those people if they can still see all of your info even without the scrollbar. You wouldn't want to get in trouble for hiding your stats! Unwanted Sidebar Showing Transparency 0.6 is the same as 60 and 0.9 is the same as 90.. I think you can figure it out ;) Top of Page
Screen Resolution is how many pixels wide and tall that is displayed on your computer monitor. There are different sizes to allow people with different sized monitors to see everything easily. The most common size used on the internet is 800x600. The smallest is 640x480 and the larger ones are 1024x768 and above.
Working with 640 pixels really doesn't give you a lot of room for your layouts, and if you go to large you're going to cause everyone who visits your pages to complain about how much they had to scroll. There's no way to accomidate absolutely everyone, but you can make it easy on most everyone by making your layouts no larger than 760 pixels wide. Another thing to take into account is how it looks to people who use large resolutions. There's a simple solution or two. You can fill your background with a color that matches your layout, or you can make a repeating background. This way your layout won't look squished in a corner to people who view pages with their large screen resolutions. Top of Page
The Basic HTML Font Code
The font tag allows you to change the way your text looks on a webpage. The three basic things you can change are the size, color and face (or type of font). Please keep in mind that not everyone may have a specific font type you're using. Maybe your font on your webpage looks all curly and pretty to YOU, but it might look plain to someone else. I suggest that you never put a lot of importance on font decorations. Your webpage will look good enough with the right size and color. The Basic CSS Font Code Same as before you can change the size, color and type of font (family). PX stands for pixels. It's how many pixels tall you font will be on a computer screen. You can also use PT which stands for point. If you like to save room there is also an abbreviated version of the code above. The Basic HTML Underline Code The Basic CSS Underline Code The Basic HTML Bold Code The Basic CSS Bold Code The Basic CSS Strikethrough Code There is no HTML code for striked text that works on Neopets. The Basic HTML Italic Code The Basic CSS Italic Code In all the CSS codes above "p" can be changed to any html tag that you could use such as "td" "div" or "h1". Top of Page
The Basic Image code
Any picture you see on a website is stored on a server. When you upload a picture to photobucket it is stored there for you to use when you need it. "img" is the type of tag and stands for image. "src" stands for source (the place where the picture is stored on the internet). So if you think of this like a sentance it reads: Get this IMAGE from this PLACE. Now you see that part that starts with http and ends with jpg? That is the URL or address of where you picture is stored on the internet. To find out what the URL is of any picture online all you need to do is right-click on it and then choose properties. A little wind*w will pop up and tell you what the URL is! Pretty simple stuff huh? If you'd like to learn more continue reading... The Alt Code The ALT is used if you would like to add anything about your picture. When you hold your mouse over the picture what you wrote will show up in a little box. Now for some reason on Neopets it will not work with spaces, so you may need to use underscores like this: The Border Code This will make a border around your picture. If you would like to take away a border just set the number as 0. Width And Height Width and height will control how tall and how wide your image is. You do not have to add this to your image if you don't want to. The image will automatically be the correct size if you leave this out. But if you want to make your image taller or wider this is how you do it. You can use a percent (%) or you can just use pixel size. The best way to figure out how height and width works is just to experiment with them. Top of Page
The Basic Link Code
This is called the anchor tag. That's what the a stands for ;) -disallowed_word- stands for Hypertext Reference. This is how you link pages together. If you put the code above in a webpage it would take you to neopets. Neopets does now allow linking to outside websites, but you can link to other petpages, lookups and so on. If you read this like a sentance it reads: Get LINK from this PLACE. The # and Name Codes This is how you make a link on the same page. You can use this as sort of a table of contents like I have on this page. Basically you're giving an anchor a name, and then telling the link with the # sign that it's on the same page and to take the person there when they click. The Target Code The target will control what wind*w your link will open in. If you tell it to open in _blank it will open up a new wind*w for the link. If you tell it to open _top it will open in the same wind*w. By default every link is _top unless you tell it otherwise. Basic CSS Link Codes This will control all the links on the page. You can control what color, what font, or even the look (text-decoration) of the link. Top of Page
The Basic Table Code
Table: This is the beginning of the whole thing and has the overall control of the outside of the table. TR: This stands for Table Row. It's just that, a row that goes from left to right TD: This is a table column. It contains the information you want in your table. If we take the example code above and use it we get this:
The Cellpadding Code Cellpadding is a space around your info to give it a little more room if you like. it looks like this:
The Cellspacing Code Cellspacing is another way to add room for your boarders or content. it looks like this:
The Colspan Code This allows you to make different numbers of columns in your table. It looks like this:
The Align and Valign code Valign controls the vertical (or up and down) alignment of text or images inside the table cell. Align controls the horizontal (or left and right) alignment of text or images inside the table cell. Here's an exampe:
Top of Page
Basic Text Area Code
Text Areas are nifty for things like update boxes or making html visible for people to copy. Keep in mind that there are two different formats to use on Neopets. TEXTAREA or TEXT-AREA (the - should be replaced with a _). The above example looks like this: The Cols and Rows Code Rows control the width and Cols control the height of your text box. The Example above looks like this: Borders There are several borders you can use. I'll show you the code and the examples: Background Image Looks like this: Background Color Looks like this: Font Color Looks Like: Put It all Together Looks like: Top of Page
Basic Marquee Code
This code can move things around the page. Just try not to overuse it. Too much can be extremely annoying. Note that not all of these will work for every browser. The code above looks like this: Text Alternate & Slide Alternate will cause your content to move from one side to the other. Slide will cause your content to enter from one side and then stop once it reaches the other side. The code above looks like this: Text Text Direction Obviously this controls which direction your content will scroll. The code above looks like this: Text Text Text Text Scroll Amount Controls how fast your marquee will display. The above code looks like this: Text Text Borders Okay so that's using a little CSS, but it looks nice huh? The code above looks like this: Text Background Colors Looks like: Text Put it all together and you can have something nice like this!
Here's the code for that: Top of Page
The Basic Div Code
This is not as hard as people think it is. Divs are layers that you can do loads of things with. The code above is in it's simplest form and I'm going to go over the more complicated parts of it as you read on. Overall think of a few sheets of paper laying around on a desk. each piece of paper is like a div, one can be placed on top of the other and they can be moved around. Also each piece of paper can be different from the others! This is called DHTML (Dynamic HTML) because of all the different things you can do with it. Positioning This is kind of where we get into styles. Unless you want to learn loads about them you can just memorize what you see above and understand what it does. The two codes above are exactly alike with the exception of the words "absolute" and "relative". That may seem like a small thing, but there's a big difference. Top of Page
CSS stands for Cascading Style Sheet. Most often it's called your "style" for short. This is a different kind of code that controls the look of your entire page. By simply making one line of code you can change all of the font on your page. It's very nice because you don't end up typing the same codes over and over again in your html.
There are SO many codes and SO many variations I'm not going to post them all here. instead i'll direct you to the w3schools website. they have excellent tutorials on learning css. I'm going to post the css elements commonly used on neo and what they do here along with a code for you to copy and paste for your lookup/shop/guild/gallery. These will generally work for all 4 of these areas. *note: all of the following codes should ALL be between these two tags: Change Your Font Color: Change A DIV Font Color: Change all the BOLD Font Color: Change Your Links: Change your BOLD Links: Remove Top Banner Remove Top and Bottom (header and footer) (Remember you Still need some kind of navigation!!) Change Outside Border around Info Tables: REMOVE Outside Border around Info Tables: Change Inside Border around Info Tables: REMOVE Inside Border around Info Tables: Change color of Info Table Background: Remove Info Table Background: Info Table Background Image: Change color of Info Header Background: Remove Info Header Background: Info Header Background Image: Make your Background on your Info "see-through" or transparent: *works in firefox too! A NON-Repeating Background: A NON-Repeating Background in lower right corner: A NON-Repeating Background in lower right corner that doesn't move when you scroll: A Repeating Background: A Repeating Background that doesn't move when you scroll: Get rid of text that says "User Lookup: yourname": Change Neopet Image Size: Change the Page Scrollbar Colors (only IE) Change the Div Scrollbar Colors (only IE) Change both the Page and Div Scrollbar Colors (only IE) Transparent Scrollbar (only IE) Underlined Titles Remove Horizontal Line in Stats Overlapping Text: Overlapping Like This Top of Page |
Updates
January 18, 2007 With the new loading image at the top of every page there's a new code to get rid of it for shops/pet lookups. #ban_spacer.show (display:none;} This has been added to the CSS Codes section. August 31, 2006 Added 2 links today *points to the left* August 26th, 2006 Added the Marquee section today and a code to overlap text in the Css Codes Section August 24th, 2006 New Layout! Enjoy! All coding is currently being updated to work with the new filters. Also I plan on adding a few more codes that seem to be pretty popular such as marquee and sound codes. |
|||||||||||||||||
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® denotes Reg. US Pat. & TM Office.
All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions
