News and Updates

Monday, 3rd January 2011 - I decided to change the layout, and rename my tutorial to Jeopardy

Tuesday, 14th December 2010 - FINISHED AND EDITED! :D sorry I couldn't finish it up earlier XD

Monday, 13th December 2010 - Sorry about the late update guys ^^ anyways I have written from Creating your lookup to Navigation .

Saturday, 20th November 2010 - Twinked some information and typed text from Positioning to Boxes

Sunday, 31 October 2010 - Wrote information on Borders and Links

Friday, 29 October 2010 - Written information from The Basics to Opacity .

Sunday, 24 October 2010 - It's the starting of this guide and there is still much to do and such little time till the major exams.

About this page...

This page was created for people who struggle with coding their lookups "including me!" when all you need is a good guide. In this tutorial, I will explain step by step how to create a spiffy lookup all by yourself just like me!

If you have any questions, contact me here .

The Basics

To start things off, what is HTML? HTML stands for Hyper Text Markup Language. In this particular type of language we need to know some basic rules. One, we always use the tag 'command' in our coding and two, we always have a 'style' tag at the front of your coding and a '/style' tag at the end. We also need to be careful how we word our coding. We can't simply type bold text, instead we use 'b'. Some examples are shown below.

bold

italics

underline

strike

link

line break

paragraph

marquee (scroll)

marquee (alternate)

These three codes are the most important codes in HTML coding, especially the style tags.

style - styles your web page
body - the elements of your web page
head - defines the information in your coding

style
body
head

Top

Inserting Text

There are times when you would like to include some dialogue on your web page. It may be a simple bio or even a tutorial. All you have to do is type what you want on your spread sheet. Using a different font can be eye catching for the viewer. So the code we use is this:


You can do numerous things with fonts, and they can really make a difference to your web page. Make sure if you are choosing fonts for your text that it is a pre-installed font, as people may not have the fonts installed on their computer. If you are very keen on a particular font, you can insert your text onto a picture and use that image for your writings.


As well as changing the font of your text, you can also change the size of an image.


It is as simple as that!

Top

Colours


In HTML coding we can either use basic colours e.g. red , or we can use hex colours e.g. #FFFFFF- white . Although we need to put it into code:


Cool eh? Remember not to use colours that blend with the background.

Drag the image to the address bar to enlarge.

Top

More Text

So know we know the basic text techniques, but what about combining them together? You can't have an interesting web page without these styles together, so here is the code:


too easy right?

Top

Inserting Images

Without pictures, your web page would look very dull. This is why adding images is so important, lucky for us the image code is simple and easy to remember.

Just remember to change 'imageurl' to your image url.

You can also change the sizes of your images, take this image for example. The one on the left is the original and the one on the right is the enlarged, if you are enlarging make sure you don't enlarge too much or it may be blurry.


Top

Opacity

Changing opacity is a great way to lighten your image, especially when it comes to overlapping images. The question is how do you do it? Simple!


You can change the opacity to what ever you want as long as it is in the range between 0-100%

100%
75%
50%
25%

You can also change the opacity of the images on your lookup. Just follow this code:

If you want to change something in particular, e.g. pet image, shop image etc. simply put #usertrophies, #usershop, #userneopets or #userneohome behind 'img'.

Top

Borders

Borders can make your image stand out, but just simple borders like 'solid' don't have as much of an effect. Bellow I have some examples of the borders you can choose from, some stand out more than others.


none

dotted

dashed

solid

outset

inset

ridge

To apply this to your image, simply use this code.

You can change 'dotted' to what ever preferred style you want as well as the thickness of the border. Also, if you want to change the colour of the border put your colour code after the preferred style in the code with just a space.

Top

Links

Linking is great way of navigating… actually it is the only way of navigating! There is a lot to be covered so I will begin with linking a web address. More on navigating is under Navigation

CLICK HERE!

Here is an example of a link, as you can see it leads to 'Jeopardy' page.


That seems easy enough eh? Before we know how to beautify it, we should learn the terms first.

a:link - what the hyper linked text will look like on first encounters
a:hover - what the hyper linked text will look when a cursor is on top
a:visited - what the hyper linked text will look like when clicked on before
a:active - what the hyper linked text will look like when someone has clicked on one of your links on your page

All right, now we know the terms lets know the code:


Remember to put this code between your style tags.

You may have noticed the first box says 'text decoration', basically you have the option of adding a basic code to you hyperlinked text, e.g. underline. This code must be behind your preference codes, as the computer will not recognize it.


You can also link images. Snazzy don't you agree?


Borders are also an option. Simply type the required text into the code as shown in section Borders .

Top

Positioning

Having all text and images in a similar position isn't that attractive is it?

As well as the simple method of positioning, we can also specify where we want our text and images. Take the crab for example, let's move him center-right.

If you haven't already noticed TNT has updated their filtering (look at section filters for more information) so now the word position is not allowed. To position your content now we must code in the body, along with the content outside the style tags.

Top

Page anchors

It took me a while to understand this small section of coding and I hope I will make you understand it as well. Let's start of with terms as it will help you to understand the coding more fully.

a:name - name of the link
a:hre f - link to specific text

Ok, that should be easy to remember. Now you want to put the 'name' above your coding.


You can change CODEWORD to anything you like as long as it differs from your other anchors. The anchor should end when you next insert the next anchor, this indicates where you can 'quick click'. In order for this to work you will need a navigation short cut. Refer to the section Navigation for further understanding.



As well as a 'quick click', you can also change the layout or information when you click on your 'codeword'. The only slight change is the addition of the 'div class'.


It is important that you have the 'div tag' above your linking other wise it will not work as well as the '.overflow' between your style tags.

Top

Scroll Bars

Note that scroll bars only work in Internet Explorer

As shown in the diagram left, there are numerous colours in the scroll bar. You may choose from a range of colours for your scroll bar to suit your web page. Please be aware that bright colours, e.g. bright yellow, may be harsh to the eyes. Use warm colours and try to colour coordinate. I have used a blue and green combination. As an extra note, try and use colours that fit the description of the scroll bar, dark shadow - dark colour, highlight - light colour etc. As you can see I have mixed the colours around in terms of shade. This effect may be eye catching to viewers.

Drag image to address bar to enlarge

Top

Music

An interesting web page has a tune. You need a reasonable amount of RAM in order for the music to load and run smoothly. To add music to your page, use this code:


You can add non-neopet music as long as it is appropriate, meaning it obeys neopets rules! If you ignore this rule, you may be frozen. Some neopet tunes can be found here
Unfortunately, only Internet Explorer users can listen to music *sigh*

Top

Boxes

Ok so there is a lot you can do with table codes here!

tr - defines table row
td - defines table data cell
table - defines table

Before you start any 'table coding' you must start and end your code with 'table' and '/table' just like in any other code.

TEXT HERE!
TEXT HERE!

VoilĂ ! You have a table. If you want any more rows or cells simply add them to your code.


TEXT HERE!

Too easy right? Now let's beautify. Don't the tables look great?


TEXT HERE!

TEXT HERE!


Now div boxes are more my style.
It's a personal preference on tables or div boxes, but in general I see div boxes as easier to code and design. Although this time there are two different ways to code because the word 'position' is not allowed in parts of your coding. You can either have your code inside or outside your style tags or both.


You may have noticed the position:absolute , this basically means that your position is exactly where you assign it. You can also use position:fixed which keeps your image or text in the place even when scrolling.

TEXT HERE!

It's not the prettiest thing in the world but it is only shown for an example. I would recommend no border and a blank background.


Further to this I have added text describing spacing between boxes.

Padding - The area around your box which separates the text from the border.
Border - an outline of your box
Margin - separates any other surroundings from your border

TEXT HERE!


Text areas are very useful when it comes to inserting code. As you can see from my page, it is full of them! In case you're wondering what a text area is, it is where you can add unlimited amounts of characters and unaffected code.

Note: replace the { } with


Great! Now we know quite a bit on coding and are ready to code our lookups!

Top

Creating your lookup

Before we start creating our lookups we should revise the basics. Even I have to look over them now and then.

Top

Design

Now we need to think of ideas! I usually like to use the wallpapers that Neopets provides, but you may choose a subject non-neopets related. Just make sure it is not offensive as freezing is a potential. I have some examples of lookups you could gain ideas from.

There are different styles, e.g. css (no images) or graphics (with images), you can choose from when creating your lookup. Two examples have been provided, but only css will be used to describe how to write a spread sheet in section writing a style sheet .


css

graphic

Drag to address bar to enlarge

Top

.ContentModule

While understanding coding, you may have come across the term .ContentModuleHeader . This basically means you can change the header of your boxes on your userlookup. There is also .ContentModuleContent , .ContentModuleTable and ContentModuleHeaderAlt which both have similar properties.


The table code here is what your headers will look like on your lookup. You can edit these codes to whatever you desire, as long as it is placed between the style tags.

Top

Removing parts

{display:none} can be a very useful tool especially in a cramped space.

NOTE: all these codes are put between your style tags!
If you remove certain necessities, e.g. navigation, then you must show another sort, somewhere on the page. If you are not sure how to create a navigation, flick back to the section titled linking .

header

footer

horizontal rules

shop

neohome

collections

pets

user info

habitarium

Top

Navigation

The neopets navigation. We see it on all default neopet pages, but can we beautify it? Yes we can! But before we can do anything, we must remove the header (shown in previous section) so we don't get mixed up between navigations. First of all we need to have a div section which shows our directory.


Now we have a directory from where we can access neo links. To make it shine we use these codes:

In case you wanted to know how to do boxes as a navigation, I have added the code here

Top

Style sheets

Ok, now we have a large overview of our coding techniques so we can now put them onto a 'style sheet' how your screen will look . This is a long and careful process as there are certain things that can not be coded or Neopets has blocked.

Top

Filters

I would like to say thankyou to neopets for putting these filters up. I know it may sound like a bad thing, but neopets have done this for our own protection against hackers. So below I have the filtered items and resolutions.

1. linking
If you notice a: -disallowed_word- somewhere shown on your page it means that you haven't added the quotation marks around your link.

2. Positioning
Unfortunately the word position is not allowed on neopets anymore. Now, in order to position our text or images we need to code in the body of the coding. If we simply use this code we will be able to bypass filters.

now how will I hack into neopets!

Top

Writing a style sheet

We are nearly done! Below I have shown you what your coding should look like along with notes.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® 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