|
|
May I first remind you that this is not a guide to CSS or HTML. If you don't know anything about CSS or HTML, go look up a guide first! These tutorials walk you through the code step by step, but it's always a good idea to learn a little bit about the subject before you jump in. You can find a few guides in my Links section!
Great! Now I'll explain all about this page.
I make these tutorials for really specific CSS and HTML purposes. They come based on requests I get, or things that I think it would be useful to know. *psst* If you want to request a tutorial, Neomail me!
To get around, just choose the tutorial you want to view from the nifty little bar on the right.
When adding a div/text box to your page, it can be difficult to judge the exact dimensions you need to use for the box. Adding in padding and margins can make it confusing to figure out where the edges of your box are.
The simple trick I use to solve this problem is putting a border around the box. This can be accomplished by putting border:2px solid red; in your CSS style="border:2px solid red; in your div tag. This makes it easy to see where exactly your box is and how big it is. Once you're done, you can just remove the border from your coding.
One of the most important things to consider when you're trying to make a layout is how your text content looks on the page. This includes font, color, size, and also padding and margins. Using "TEXT TEXT TEXT" over and over again doesn't give you an accurate vision of how text looks on the page, and trying to write a bunch of nonsense paragraphs is tedious and time consuming. Thankfully, there is a language made for just this problem.
Lorem Ipsum is a nonsense language derived from Latin and is used by web desginers to fill the page with realistic paragraphs. A quick search of "Lorem Ipsum" will give you a few generators where you can generate your own body of text in just seconds.
Block-Level- refers to any element that automatically creates a line break (like pressing the Enter/Return button on your keyboard). For example, tables and div tags are block-level elements.
CSS- Cascading Style Sheets. CSS is the part of your code that goes between the style tags, or in the style attribute in your HTML. CSS is used to style a page, meaning it adds all the color and the finer details to your site, including backgrounds and special links. #box2 {width:500px;} is an example of what you might see in CSS.
Class- in the context of Neopets, used mostly in CSS. A class in CSS is notated by a period with a name after it, like .classname and are applied using a div or span tag. Classes are meant to be used more than once on a page.
Div- used in HTML. Div tags are block-level elements and can be used to set a block of content anywhere on the page, and can be styled with CSS.
Element
MORE SOON
To make part of an image clickable, you first need to make the image.
This will be our example.
I got a little lazy... that's okay, it's an example! The light purple boxes will be our links.
Anyway, we're going to start with the light purple boxes.
The first thing you need to do is find the coordinates of the upper-left and bottom-right corners of the box. You need to find the coordinates to tell your image map where you want the links to be located on the image.
This is very easy to do on MS Paint for Windows users, or the free program GIMP
Start Paint or GIMP and open up your image. Make sure the canvas is fitted snugly to your image!
Now, take your mouse and hover over the upper-left corner of the first box. Look at the bottom-right corner of the window (or bottom-left if you have a newer version of Paint) and you should see the x and y coordinates.
See them? Great!
Now, jot those down. You'll need them!
Do the same thing for the bottom-right corner of your box. Jot down those coordinates as well.
NOTE:The first number (in this example, 22) is the x coordinate and the second number (in this example, 21) is the y coordinate.
You will see me referring to the first set of coordinates as x1 and y1, the second as x2 and y2, and so on, and so forth.
Repeat the above process for the rest of your boxes. The coordinates for the example boxes are:
22,21 114,53
10,66 94,97
40,115 124,147
12,154 78,181
Now, we have to write a code so the boxes actually DO something. For that, we need to make an Image Map. This is the code that defines where the links are on the image and where each link goes.
The very first part we need is the bit where you give your map a name. This is the code:
Replace NAME OF MAP with a name for your image map. The name can be anything, but remember the name! You'll need it later.
For my example, the map will be called examp, so the code will look like this:
Great! Now you have to code your first box. Your code starts with this code:
This defines the first box! Next, type shape="type" , where type is the shape of your link.
For link shapes, you can use rect for rectangles (which we are using right now) circle for a circle, and poly for any other shape. I'll talk about circle and other shaped links a little later.
Next, type coords="x1,y1,x2,y2" , where x1,y1,x2,and y2 are the coordinates for the upper-left and bottom-right corners of your box, respectively. These are the ones you wrote down earlier.
The code should look like this so far.
Now to put in the actual link.
Type href="URL HERE" , where URL HERE is where you put your link. Remember, all links must be Neopets links!
Make sure to put the ending bracket there, or the filters will block your code!
With your first box finished, the code should look like this!
Now, repeat that whole process for every box! Using the example, my code will look like this:
Don't forget the ending tag! Now, to apply it, you first need to put your image on the page! This is done with the usual code
In the tag, type usemap="#MAP NAME" . Replace MAP NAME with the name you used for your map. Don't forget to end the image tag! The full code now looks like this!
Here is the code for our example.
Go ahead, try it out!
To get rid of the blue border around the image, add border="0" into your image tag!
There you have it! You've made your very own Image Map!
There are a few things I have left to cover.
CIRCLES
Now we get to use the circle on our example!
Circles are pretty much the same as rectangles, except the code will now be area shape="circle" instead of area shape="rect" .
Also, instead of the coordinates being coords="x1,y1,x2,y2" , you use coords="x,y,r" where x and y are the coordinates of the center of your circle and r is the length of the radius.
To find the radius, you can use a formula called the Distance Formula, or you can take the lazier way and just tweak the radius until it's about the right size.
The center of my circle is 75,281, and the radius is about 50. The code will look like this:
Try it out!
OTHER SHAPES
Finally, to make links for other shapes, use the same code. Use area shape="poly" this time and coords="x1,y1,x2,y2,x3,y3,etc..." adding as many coordinates as you need for every point on the shape of your link. For example, if your link in a hexagon, you'll need 6 coordinates since a hexagon has 6 points on it.
For our example, we'll be using the triangle.
The points on my triangle are 22,449, 88,354, and 113,420. The code will look like this:
Try it!
So, that's it! Now you can make links of any shape and size!
HUGE thanks to moondust_ and monkey_mayhem for looking over this tutorial and helping me fix it!
Alright, chances are that, if you've been on Neopets a while, you've seen petpages that seem to have more than one page within a single page.
Well, let me first explain that it's not really a fancy coding thing. It's just a clever use of page anchors and div tags!
Anchor- A link that links to part of the same page, rather than to a different page
The easiest way, in my opinion, to make these multi-page layouts is by using CSS. This tutorial doesn't require you to know a lot of CSS, but you really should look at a guide so you know what's going on!
The first thing to do is to make a box that contains your pages. this box should be the height and width of your desired page size.
You want to start with the standard style tags
From there, you want to make your box. Type #boxname, where boxname is what you want to call the box for your page. For our tutorial, our page case will simply be called case. Type your case name into your CSS and put the beginning bracket, {
Next, type width:#px; where # is the width of your case in pixles. Then type height:#px;.
Now you have the size of your page! For my page, I'll be using a page that is 300 pixles wide and 450 pixles tall.
NOTE: Be careful of how tall you make your case! On many laptop screens, 600 or 700 pixels is the talest box you can make without forcing the page to scroll down to fit your box. If the page is forced to scroll, it'll create problems when you want to use page anchors later!
After you have the height and width set, type overflow:hidden;. This bit of code stops the box from expanding or scrolling down when you fill it with content.
Don't forget the ending bracket {.
The code should look like this;
Now to make the place where you put all of your content (content being the writing or other stuff you want to fill your pages with).
Type .name, where name is the name of your content area. For our example, our content box will be called content. Don't forget the starting and ending brackets,{ }
Type height:#px;, where # is the same number you used before, for your box. The width will automatically stretch to meet the edge of the case.
Type overflow:auto;. This causes the content box to scroll one it is filled.
After that, add in the regular codes, such as text color, font, and size.
This is how the code looks so far;
Now we have to apply the coding. You first need to put the case on the page. Outiside of your style tags, type this:
NOTE:Notice how I put two ending div tags last. When you make a starting div tag, you always need an ending one. When you have multiple div tags, you need a seperate ending tag for each of them.
For example, our outermost div tag is the box tag. Inside of that tag we have our content tag. The first ending div tag will end the content tag, and the second will end the box tag.
Here's the code in action. I've added a blue border, so you can see where the case is.
So now you're thinking "Well, that's great... but what about the other pages?" Well, that's what we're going to take care of next!
Inside of your case, put in another content box. You code will look like this;
This is what the code looks like in action;
As you have probably noticed, you can't see the sentence that says "Here's some more content!". That's where are page anchors come in!
The first part of making an anchor is to tell the page where the anchor leads to. Type this inside your box but after the first ending div tag:
second is the name of your anchor point and WORD is the title or first word of your page. Since my second page starts off with the word "Here's", my code will look like this;
Now you need to link to the anchor. Choose where you want to put your link, and type the following:
second is the name of your anchor and Link is the text that will be clicked to go to the page anchor.
Here's the whole code;
Here's that code in action!
When you click on the link at the top, it brings you to the next page.
NOTE:If you use a heading, always make the anchor around the heading.
There you have it! Now you can make as many pages and anchors as you like! Good luck!
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
