|
|
| Howdy, guest. Looks like you've stumbled across my petpage. That probably means you had a question for Alatyr about the fancy-schmancy petpages she made on her gallery account. And, as usual, she's too lazy to answer every neoMail she gets and just has to show off some more, so she worked her hackneyed coding skills on my page to show you what she's done. | 
|
Al finally caught on that a lot of people are visiting my page. (Probably hoping to find a guide up to Cryon's standard. Sorry, but no.) So she's finally going to update it and make it semi-presentable.
Now, we're still not going to start at the beginning. We're going to assume that you already know some basic HTML. For example, you can make new words show up on a petpage or lookup. So we're going to look at what Al has done on her petpages and how you can use that on your own.
Also, we're not actually going to go step-by-step through how to actually type in the HTML/CSS commands. We'll show you lots of examples, though. You should be able to find the conventions (like semicolons, quotation marks, braces, etc.). If not, Al might add a section on that. But later.
|
The Neopets HTML Guide A lot of people knock Neopets' own HTML guide. But it's a pretty good guide. So don't ignore it or assume it's not good. It doesn't cover some of the (ugly, obnoxious) things that people want to learn, so they figure it's not useful. Al will try to remember to link in to the right page on that guide for some stuff. Read it. You might learn something. |
Warnings and Disclaimers |
| Al is making an attempt to present a useful HTML/CSS Help page. However, she's still learning. And what she knows, she taught herself, so it isn't always pretty. I give you fair warning. If you google for "HTML Tutorial" or "CSS Tutorial", you'll find lots of very well-written guides by people who really do understand this stuff. Even better, type your specific question into your search engine. You'll probably find a guide or forum topic that can answer it directly. Now, Al has gotten everything on this page to work. Note that she does use Firefox on a widescreen PC, and even though she knows she should test everything in several browsers and monitor sizes and on a Mac, she usually doesn't. That said, if something doesn't work, she really can't help. A lot of Al's code has degenerated from the well-organized mess she usually likes, so something may work entirely on accident. We don't know. And she's too busy making new pages to stop and look. Also, there's a lot missing. We know. And there's a lot of things that Al admits she doesn't know. Again, we know. We're working on it. Please be patient with us. Thanks! ~Pat and Al |
Are you sure you want to see the insides of those pages? Really? Well, alright...
First of all, HTML and CSS are not two different languages. CSS is merely a different way to arrange HTML. The commands are the same, though the placement may be a little different. CSS introduces some extra ways to do things that HTML can't quite handle, but it is still based on everything HTML. If you know HTML, CSS is not crazy to figure out.
You need to know or learn HTML in order to write with CSS. But you don't need to know CSS in order to write HTML. Using CSS lets you write a "Style Sheet" (more on that in a minute). That Style Sheet then controls the way your HTML code is rendered.
Anyone who tries to tell you that CSS is "completely different" obviously has no idea what they're talking about. Ignore them, and don't take any coding advice from them.
Second (and this is only second because it bothers me so much when I see it), you do not "code" images. You host images on a hosting site, and they give you the URL to your image. There is no "coding" beyond the "img src" tag.
Third, all browsers are not the same. Some browsers are "nicer" than others when you mess up your coding, and they will render the page correctly anyway. Others aren't, however, which is why you should learn proper conventions.
(And having said that, no, Al doesn't always follow proper conventions. She taught herself off of webpages, for goodness' sake. But still, you should learn them....)
Some good conventions to use are:
The first, and most major, part of Al's design is her Style Sheet. Once you get the Style Sheet right, the rest of the page is easy(er).
The Style Sheet lists the colors, faces, and sizes for each of the main HTML elements (background, font, tables, etc.). This Style Sheet is the basic concept behind CSS. Instead of having to enter the changes you want every time you use a certain element, you enter it all once and the effects are applied to the entire page. (If you understand styles and formats in most word processing programs, you already understand CSS.)
All web browsers have their own built-in Style Sheet. If you're used to plain HTML, you know you can use a Level 1 Heading (H1) and you get a certain size, font, and weight to the text. Using CSS, however, you can overwrite parts of the built-in Style Sheet. (They're usually boring, anyway.)
Most web browsers support CSS, though some don't support all the different tags. So what looks great in Internet Explorer might look a bit off in Firefox or Netscape. If I were you, I would figure out which one gives me more trouble (that's Firefox/Netscape for us) and which is more forgiving (IE), then code using the troublesome browser.
That's completely normal. A Style Sheet tells your browser what things will look like. But it doesn't add those things to your page! You still have to write your webpage the way you normally would.
The advantage of Style Sheets is that you don't have to remember what color your links are (or font or tables or whatever). The Style Sheet automatically makes them the color you picked earlier. And if you want to change the color, you don't have to find every single link you made. Instead, you find it one time and change it there. Your page will update to the new color.
Put these at the beginning and the end of your Style Sheet. They clue the browser in that you're writing a CSS stylesheet; otherwise, nothing will work right. Your entire Style Sheet will be written in between these two sets of tags:
I keep trying to write something in there like "Your Style Sheet Here." But the deranged code Myncis don't like that idea and yell at me. So, sorry.
Here is a list of the most common style sheet elements (at least as far as Al is concerned). A lot of style sheet parts (heading, font, links, tables, etc.) use the same commands to get things done, so we're going to list them all up here. In each of the specific sections, we'll list the element name. For a full explanation, you can look back up here.
A note on borders: borders are actually four small boxes on the four sides of your bordered element. Most border commands affect all four sides at one time by default, but you can use all of the following commands and specify which side gets the treatment. Just add "-top", "-bottom", "-right", and "-left" after "border" in all the following commands (e.g., "border-top" or "border-right-width").
One more note on border language: all four borders can be affected differently by a command by giving that one line four different attributes. Borders are affected in this order: top, right, bottom, left (clockwise). So a call like "border-color: red blue green orange" sets the top color to red, right to blue, bottom to green, and left to orange.
So, seeing all those names doesn't tell you a thing about how to use them. Down in this section, I'll give examples of how each of those elements can be combined in the style sheet. (We're still up in our Style Sheet. Keep that in mind.)
Everyone wants fancy links. So here goes. First, the different types of links:
Playing with link colors and styles can be fun. Just don't go overboard and make them obnoxious. No one likes an obnoxious link.
Don't be too understated, either. That is, don't make your links blend in too well to your text. If no one can see them, no one can use them!
These examples will change your link colors. We did different colors so you can see the differences on an actual webpage.
The "color" tag, obviously, is the color of the link. You can google for a complete HTML color chart to get the six-digit numbers, or you can use basic names (like "red" and "blue").
The "text-decoration" tag lets you add something to the line. Usually, you're suppose to underline links. Al doesn't like to, so she just makes them a different color.
The "cursor" tag changes the cursor when it's over the link. That's one more clue that your reader has found a link.
A link on the same page is called a page anchor. Or at least that's what I call it; it has other names. Al wrote about those down in the Fun Stuff section. (Click the page anchor to go there! Aren't we funny?)
There are elements called "headings." They start at H1. Only define the ones you'll need. The others, since they're never called on your page, won't be used and so don't matter.
These are actually the three headings I used on this page (main title is H1, sidebar titles are H2, subtitles like "headings" for this section are H3).
This is the fun part--you can choose a look for your fonts, define it all once, and then just use the new element whenever you want that effect. And the best part is that you can define more than one basic font! Sneaky, huh? All you have to do is give each font a unique name. Simple.
To make more than one paragraph style, use a "." to denote a new class. Then write the new class name after it.
(A side note: just because you define this for a font doesn't mean your browser knows that. If you wanted, you can use this class for a completely different element. But that's even beyond what Al can figure out how to do well...)
Okay, so Al's not too original with naming elements (at least she's more original with naming pets). "p" is the basic font, what I'm using right now. "par2" and "par3" are two alternate fonts that Al might use somewhere else. You can name them whatever you like (like "fred" or "pinkfont"--whatever).
Right, right, I said I would, didn't I?
The two fonts that were designed to be used on the web are Georgia and Verdana. We're using Verdana now. Whenever possible, use these as your default fonts.
The second most common/best fonts to use are Times (or Times New Roman) and Arial. These were designed for print, but they work rather well on the web.
The default font for all browsers is Times. If you don't specify a font family for a text element, all browsers will render it as Times. (Which is rather silly--Georgia should be the default!)
One more thing: serif vs sans-serif. Serifs are those little extra squiggles on the edges of fonts like Georgia and Times. Some people think serif fonts are easier to read. Sans-serif fonts, like Verdana and Arial have "clean" edges. Some people find sans-serif fonts easier to read. (P.S. sans means "without." So sans-serif is "without serifs".)
Pick whichever you like better. Then use the other for headings or highlighting. That offers a nice contrast.
If you look back up at our font examples, we wrote "papyrus, georgia, times, serif". That tells the browser to first use "Papyrus" font if it can. If it doesn't have that, use "Georgia". If it doesn't have that, use "Times". If (for some bizarre reason) it doesn't have that, use the first serif font it has. Use "sans-serif" at the end of a sans-serif font list.
You can even define how your text areas look. The text areas, in case you're lost, are the boxes that all this code I'm giving you is going in to (otherwise, web browsers would try to implement that code, and we'd just have one big mess). You can put anything you want in a text area.
If you want someone to be able to copy code, you have to put it in these boxes.
Now, for Neopets, you have to define it as "textarea" in your style sheet. But when you actually want to put in a text area, you have to use "text area", with an underscore "_" between the words. (Why? Probably because the box you enter your text in for a petpage is a text box itself!)
Want to lose the white box that accompanies all of your images? This doesn't work on Netscape, but I add it anyway.
You can even change how an ordered list looks on your page, including which bullets are used, what color it is, and where it's aligned. And just like fonts, you can define more than one style, so long as they have different names. Again, someone isn't too brilliant with names...
Yep, even tables can be tweaked. Instead of laboriously redefining a table and its components every time you want to us it, do it once and be done with it. Again, just like with fonts, you can define more than one style for your tables.
We're finally to backgrounds and colors, the basic look of the page. Ours is pretty basic because we're going to be putting "div" layers with text over it.
Div layers are flexible containers that hold anything you want them to. They're great for dividing up a page and are easier to work with than frames or tables. I have 3 div layers on this page; one for "On This Page", one for the main body of text, and one for "Links".
Each div layer needs its own name, and each one can have whatever style or position you want. Div layers can go inside each other or inside tables. You can even customize scrollbars for each div layer.
These are the exact div layers from this page:
Okay, so that part on scrollbars is not very helpful because it doesn't tell you which parts of the scrollbar are shadows or highlights. But the way to find out is to play with the colors there and see what changes.
Once you've got the Style Sheet defined, you're well on your way. All you have to do now is to do your normal HTML coding and the Style Sheet will be applied to everything you do. Just for kicks, here's the basic outline for this page and some of the applications for that Style Sheet.
A Note About Text Areas: In order to use text areas, you have to take the words "text area" and add an underscore ("_") between them. I cannot show you how to do this because every time I do, the Neopets compiler tries to insert a text area. Grr. Don't forget to close your tags...
Class vs Id: If you use a "." before an element's name, then use "class" when you want to use that specific version. If you use a "#" before the element's name (see Al's Div layers section), then use "id" when you want that version. There's probably a difference between the two, but Al hasn't looked that up yet. I told you she knows far less than you think.
You've probably noticed that on all these pages, the middle section scrolls when you click on a topic in the left column. This device is called a "page anchor," and it basically creates a link on the same page. Sneaky.
First, you create a link tag where you want people to click just like normal ("a href="). But instead of putting in a URL, you just add #Title, where "Title" is the name of the section you want to jump to. The "#" symbol tells the browser to stay on the same page and look for an "a name" tag with the same "Title.
Now in your regular page coding, skip down to where you want the browser to move to and give this the a name= tag, using the same "Title" as the link. Notice: no "#". When the link is clicked, the browser jumps to the new target.
Since we have our links in one div layer and our text in another, when you click the link, it moves the other section in order to find the target.
You can also jump around within sections (I just did that with the "div layer" link), if you didn't want to make sidebars.
One note: we find it helps to write the "a name=" and "/a" tags without any text in between. Otherwise, the browsers get funny about what's a link. It's probably something Al doesn't do right. Anyway, we put the "a name" tags before the element (such as H3) that it targets. So it looks like this:
Check your "a name" tag. If you use a "#" here, most browsers won't recognize it and will just sit there. "#Title" and "Title" are not the same to them. IE, however, isn't too bright and thinks they are the same...
Check your capitalization. Most browsers don't think that "#Title" and "title" are the same thing, either.
A marquee is scrolling text. You can make it go any direction you like.
Before you get carried away: Marquees are often abused. Use them sparingly. Use them well. Too many things that move give people headaches, especially when they're trying to read the moving target.
We're showing the HTML tags that you would enter at each instance of a marquee. Two reasons: 1) Al doesn't know the CSS and doesn't want to look it up and 2) maybe you won't use it as much.
So the basic parts of a marquee are:
If you want to change the font of your marquee, add your font tag (either "p" or "font") around your text.
I can't believe Al actually gave you that information. Remind her that it's all her fault if she starts complaining about annoying marquees, 'k?
Most browsers won't let you override their scrollbars. But there's always IE...:
Why? You have to have a link back to Neopets on every petpage. The problem, when you have petpages on gallery accounts, is that people use the default link at the top of the petpage (which is a referral link!), create a new account, and you get a referral bonus on a side account...followed closely by a warning for earning NPs on multiple accounts, even though TNT made the link.
So, yeah, cover the link that gets you in trouble and use the ones that don't:
I throw that in at the end of all my main Div layers.
Can I copy your layout?
Yes. There's nothing unique about tables, div layers, and colors.
I put in the Style Sheet, and nothing happened!
A Style Sheet only tells your browser what the page will look like when it's done. It doesn't actually make a page for you.
I put in everything just like you said, but it looks weird!
I did say that I didn't guarantee any of this. Everything on this page is optimized for my pages on my monitors and my browsers. That unique combination probably produces some randomness. That means, of course, that your monitor/browser combination (along with any preferences you have set there) may create a different reaction on your pages. Try adjusting the sizes and positioning of different things, playing with your preferences, or adding/subtracting elements in your Style Sheet.
There, now you know everything Al does. Not too helpful in the long run, is it? But you insisted, so we told you. Remember, this is just here for your information; we're not trying to teach you how to make a pet's page, just showing you how we did it. "You can't complain about the service here, because there isn't any." Anyway, why are you still hanging around here? Go start butchering--erm, designing--your pet's page... |
|
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2006.
® 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
The Neopets HTML Guide
Neopets CSS Help
Neopets HTML Help
Coding Help
Lookup Help
Neopets Color Chart
Need a Guide?
Want Answers
Newbies' Guide*
NeoMillionaire Guide*
Quests Guide*
* Other pages of Al's
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® 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