..:: Fun HTML ::..


There are tons of cool, fun, and useful snippets of HTML out there, besides the old paragraph, break, and table codes. This page will teach you how to use some of them.

Choose a destination: Page Anchors | Marquees | Adding Backgrounds to Text Areas


Page Anchors
Page anchors are very useful if you have an extremely long page and you want to make it easy for your visitors to simply skip down the page to the part they want to be. Take the Destination links above for example. If you click on "Marquees", the page will immediately skip down to where the marquee instructions are. That way, the reader won't have to bother to scroll down the page, looking for it. This page isn't particularly that big, but you know what I mean. ^^;

Now, use that code to put in what the visitor will click. And after they click it, insert the code below to direct where the page will skip to.

Please remember that the "linkname" MUST stay the same! The "linkname" is what connects the link and the place to skip to together.

Well, did it work? I hope it did! ^__^ If you are having problems, feel free to e-mail me!


Marquees
Have you ever seen text scroll itself horizontally across the page? That's a marquee! And making one isn't hard at all.

This is an example...
The code above will create a very basic marquee. Change "Text Here" to the text you want to scroll across the page.

Is it a little boring? Then spruce it up! ^^

This is an example...
Whoa! Now it's going faster! Great, huh? But what if your visitor couldn't read it fast enough, but you still want it to go that speed? Simple. We're tweak it a little bit again so that it'll slow down on mouseover.

This is an example...
Try hovering your mouse on the above. See how the text slowed down, and speeded up again when you took it off? "scrollamount" is how fast it goes when you're not hovering over it. "onMouseover=this.scrollamount" is how slooow it goes when you hover over it. And "onmouseout=this.scrollAmount" is how fast it returns after you're done hovering over it. Cool, huh? ^_^


Adding Backgrounds to Text Areas
There's a lot of textareas on this page. See how each has a background instead of being plain white? You can add backgrounds to your textareas, too, to match your layout or simply to make it look pretty. This requires a tiny bit of knowledge on CSS (Cascading Style Sheets). If you know you do not use CSS, then you'll have to add CSS to the HEAD of your HTML document. The head tags look like this: <head> </head>. Simply add these tags: <style> </style> in between the head tags, and add the below code inbetween the style/CSS tags.

Now, you can do a lot to customize the above code. Make sure to change "COLORCODE" to the colors you want the border and text to be. If your background is going to be light, I suggest you make the color of the text and border dark, and opposite if your background's going to be dark. You can change the fonts to fonts you want to use, and change the positions of the background. Change "no-repeat" to "repeat" if you don't want the background to stay in one place. You can also change the "background-position" to something else like "bottom left" or "top right" if you want to. Otherwise, just leave it like that. Be sure to put the image URL in place of "BACKGROUND IMAGE LOCATION".

Remember, the code must be put in your CSS coding. If you have any trouble, feel free to e-mail me and I'll help you out. ^^
I hope this guide has helped you! I'll add more things if I can! ^^ Good luck on your web-making. ;)


-------Disclaimer-------
Eonlight Valley, all its content and graphics are unless stated otherwise (c) Kronakitty (kronakitty@gmail.com) 2005-2009. Official Pokemon contents and images are (c) Nintendo 1995-2009. This is only a fan site, and I do not claim ownership of Pokemon.