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 .
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.
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
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!
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.
too easy right?
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.
You can change the opacity to what ever you want as long as it is in the range between 0-100%
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'.
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.
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 .
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.
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.
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
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*
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.
Voilà! You have a table. If you want any more rows or cells simply add them to your code.