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.
italics
underline
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
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
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
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
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
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.
Borders are also an option. Simply type the required text into the code as shown in section Borders .
Top
Positioning
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.
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
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
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.
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 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.
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 .
footer
horizontal rules
neohome
collections
user info
habitarium
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
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.