Coding tutorial:

Foreword

Coding basics

HTML HTML basics
Basic tags description
Heading (H tags)
Bold, italics, underline and super/subscripts
-blocked-Images
Adding spaces (breaks)
Paragraphs
Font tag

Table basics
Table properties
Table - coding example 1
Table - coding example 2
Table - coding example 3

Textareas

CSS CSS basics
CSS terminology
CSS syntax

Div and span tags
Font/txt properties
Border, margin, padding, dimension properties
Background properties

Alpha (opacity) filter
Chroma filter
Glow filter
Shadow filter
Blur filter
Grayscale filter
Xray filter

Scrollbar properties

Lookup FAQ Lookup coding FAQ intro
Lookup backgrounds FAQ
Positioning objects FAQ

Goodies

Lookup coding template

Off page links to premade lookups
Off page links to neopian directories

-blocked-
link to anchor

And this is what it looks like:

link to codinghelp page
link to anchor

Note: What an anchor does is mark a spot on your page so that you can directly link to a specific portion of your page if it is really long. Be sure to name each of your anchors something different! Otherwise it wouldn't work! The anchor can also be accessed if you're linking from another page, you will have to add #anchor or whatever you named your anchor to the end of the url. eg: http://www.neopets.com/~codinghelp#anchor

Images

Images can be added onto the page using an img tag. The general code is as followings:


source - this is where you enter the url of the image you want to put up.
width, height - you specify the width and height of your image in pixels here. You can also make the image bigger or smaller than its actual size by putting down your desired size. These two attributes are not neccesary, however it is a good thing to add to make sure that your layout position is correct even if the image did not load for whatever reason.
align - another optional attribute that you can leave out. Align can be left, center or right. People typically use it to center images. (The old fashion way of doing things ^^)
border - optional attribute, it sets the width of the border that goes around the image (default for just the image is 0). Whenever you turn an image into a link however, that annoying blue border appears. The border=0 setting will remove that for you.

Note: The img tag is one of the exception tags that DO NOT have a closing end tag.

Adding Spaces (Breaks)

The break tag is like a "return" or "enter" key. It forces everything that appears after it onto a new line. So if you want a line of empty space seperating things you have to use TWO break tags...

Some text here
More text on the next line
A line space before more text.
The result will look like this

Some text here
More text on the next line

A line space before more text.

Paragraphs

The paragraph tag (P tag) creates a paragraph block element. Which means it will add a line of space in front of and after the text inside the P tag. The P tag can have a closing tag, but it is not necessary. However, it is a good idea to put that to ensure the paragraph closes exactly where you want it.

The first paragraph goes here
The second paragaph goes here

Font tag

Font tags have now been practically replaced by css. Not many people use it anymore, but for completeness I'll briefly go over them.

Some text - Some text

color - You put in the color of the font here obviously. Either use color names or hex code. (Remember to use # for hex codes eg color=#00FFFF)
size - Declare font size. Smallest size is 0 all the way up to 7 I believe.
face - Declare font type. It's the same thing as font-family in css. Whenever you are using a font with multiple words in its name (eg Arial Black) be sure to put it with double quotes (face="arial black")

Tables

Now we'll get into more difficult topics. Tables are slightly more complex, but still relatively easy to understand. ^^

Tables were originally meant for orginazing tabular information on a webpage. However the table format made fancier page layout possible 7/8 year ago. In the recent years, css coding has came out and will eventually be replacing table layouts styles. So you CAN use tables to create your layout (I still use some for part of my web layout), but you should also know how css layout works.

basic table structure
table - Like the html tag, tell the browser where the table should be placed.
tr - Table row tag, you use it to start a new row in the table
th - Table header cell tag, A table cell that is predefined to be center aligned and bolded.
td - Normal table cell tag.

Now for the list of properties (or things you can define) within each tag... (eg: border is a property in )

Table properties

width - Sets the overall width of the table. You can use exact pixel size (width=200) or percentages (width=50%). Remember that even if you set the width, the table might still stretch in width if you put in cell elements that are too large. (eg putting an image with a width of 300 px within the table). Use percentages for a "floating" layout where the table width automatically adjust to fit screen resolution. Can also be used in td and th tags.
height - Same thing as width, but it declares height. Not as useful as width because of the stretching. Can also be used in td and th tags.
border - It sets the width of the border around the table and each table cell. Use a setting of 0 (border=0) whenever you are doing a table layout.
bordercolor - Sets border color (duh!)
cellspacing - Sets how much room in pixels there is between each cell. Same thing as css margin property except this is only for tables. Use a setting of 0 (cellspacing=0) whenever you are doing a table layout.
cellpadding - Sets how much space there is between the edge of the cell and what's inside the cell. Same thing as css padding property except this is only for tables. Use a setting of 0 (cellpadding=0) whenever you are doing a table layout.
align - Horizontal alignment. It has 3 settings, left (default for td), center (default for th) and right. Can be used in td and th tags.
valign - Vertical alignment. Again 3 settings, top (default for td and th), center and bottom. Can be used in td and th tags.
bgcolor - Sets background color for the table. Can be used in td and th tags.
background - Sets background image for table. (eg background=url) Note that older versions of Netscape might repeat the background image for EVERY SINGLE cell. x_X You can get around that by having a nested tables, have an outer table with a single cell and set the background for that cell to your image. Inside that cell, you open another table and do your normal coding there. Remember to close all tags properly! It's very easy to miss a closing tag here.
rowspan - Use for td and th tags ONLY. Rowspan sets how many rows the cell takes up. A rowspan setting of 2 (rowspan=2) will span across 2 table rows. (See coding example 2)
colspan - Use for td and th tags ONLY. Similar to rowspan. Colspan sets how many table columns the cell takes up. (See coding example 2)

Now for coding examples after that mess of info...

TEXTAREA

This section is going to require some thinking on your part since Neopets will not allow me to directly use the word TEXTAREA...
Anywayz, this is the coding to get a TEXTAREA box:


(N) For neopet's pet pages you CANNOT directly use the word "TEXTAREA". Instead you need to type in "text area" (with underscore "_" in place of the space).
(L) For neopet's lookups, I believe TEXTAREA are NOT VALID tags... thus you can't use them. Instead, you need to use css to get that effect. (Pls correct me if I'm wrong ^^)

CSS basics

First things first I guess, CSS stands for Cascading Style Sheets. It is developed to quickly format sets of related tags without having to retype the coding every single time. For example, if you want all your headings to be in red. You can declare (specify) it using css and you will not need to use annoying font tags everytime you have a heading.

There are 3 types of css formatting styles. External linking style sheets, embedded style sheets (aka style tags), and inline style sheets.

External linking style sheets allows for global (full site) style declarations, that way changing a single style sheet can update how ever many web pages you have. (For the purpose of this tutorial page, I will not discuss this type of style sheets. The css coding is exactly the same as the other two types though.)
Embedded style sheets uses style tags, to declare formating for a single page. The style tag should technically be placed in the head tag, but it will work if you put it into the body of the page.
Inline style sheets are used for changing single tags that DO NOT use the formating other tags of the same type use. For example, if you need special formatting for a specific link you will use inline style to "override" the style tag settings. Inline style sheet is added directly into your opening tag using the style property (eg: ).

CSS terminology

Before diving right into the coding, I will go over some of the terms I will be using.

embedded or style tag - Refers to css coding placed within a style tag, . Remember to place the style tag at the beginning of your page (preferably in the head if possible).
inline - Placing css coding directly in the tag of use by having a style property, eg
declaration - Name for a single line of css coding. It includes the object and its properties. (eg: b {color: red; text-decoration: underline;} is a single declaration.)
object - NOT to be confused with the object tag in html to add java or flash applets on to the page. Object in this case is a generalized term for calling the group of tags that will be affected by the css coding.
property - Refers to the css coding that will be affecting the object
attribute - The "settings" that can be applied to each property. For example, for the html "align" property, an attribute would be "center" (ie: align=center).

syntax - Call it coding "grammar". It is the way CSS should be written so that the browser can understand it and output the correct results. A common error people make in coding is syntax error, where they placed coding in an improper fashion, adding nonsense properties or attributes or forgetting to properly close off brackets, quotes and tags. The browser ignores such coding and skips it until it finds "normal" coding. This can lead to strange screen display. (If this were program coding, the program will likely not run at all)

CSS Syntax

Now I will explain the framework of css coding, the syntax (grammar). The syntax for embedded and inline coding is slightly different. Thus I will show you both types.

Embedded (style tags) syntax

object1 {property1: attribute1; property2: attribute2;}
object2, object3 {property3: attribute3;}
object4 object5 {property4: attribute4;}
object6.classname {...}
#idname {...}


The above is the syntax for the embedded css coding. The style tag encloses all the css declarations. (Try and put ALL your css into a single style tag in an orderly fashion. It'll made your life, and the person trying to edit/debug your coding a lot easier.

Here's the "rules" in words

• Each set of properties for an object is enclosed within a set of curly braces { }
• Attribute follow the property name after a colon :
• Each property in the list is seperated by a semicolon ;
  
• If 2 or more tags share the same declaration, seperate their names using a comma ,
• Use a space to seperate the tag names if the specified tag is located within another tag.
  eg: to format an i tag within the b tag, we will declare withb i {...}
• If you want to give a selected group of tags special formatting, you use the class property with the html tags and declare CSS using objectname.classname {...}
  For example, I want a special class of links with a different formatting from the rest of the links. I will label these as follow:
  < a class="special">Link
  and in the style tag, declare a.special {...}
  
• Note that objects with a single class need not to be all of the same type of tag. For a "general-purpose" class declaration that can be applied to any tag type, use .classname {...}
• #idname is used for formatting of a SINGLE tag. Even though it will work when applied to multiple tags, it was designed to identify and format only one. So use classes for multiple use declarations. The tag to be formatted has to be labelled with the id property (eg: Link)

Inline syntax


The above coding is the way you would write out inline css. It is best to put quote marks around the properties so that the browser cannot get confused if a part of the css coding is messed up. Remember to ALWAYS close off that quote mark though.

Rules for inline styling in words

• the style "property" is place within the tag of use
• attribute follows property after a colon :
• all properties are seperated by a semicolon ;

Div and span tags

These are special HTML tags made for css coding. They basically provide a tag "box" so that you can add your fancy formattings without needing to override (cancel) the preset functions of other tags.
(L) - Neopets lookups DO NOT allow you to use div OR span tags. You need to substitute with either p, i, tt, u, b etc tags.

- A tag box that adds a line of space in front and after it. (Formatting like the paragraph tag).
- A tag box that DOES NOT add space. This is good for layout formatting.


Now I'll get into the actual code properties and attributes. The coding will be shown in embedded (style tag) format. You can convert it over to inline without too much difficulty I hope. Note that I will only be discussing a selected number of properties.

Font/Text css properties

These are probably the easiest to start off with as you know what the result should look like.

Property	Attributes	Description	Example
Color	color names or hexcode colors (#000000)	Same as font tag color property. Change text color for ANY tags	color: #D9D872;
Font-size	size in points (pt) (12pt)	Same as font tag size property. Change font size for ANY tags	font-size: 12pt;
Font-family	name of font/type face	Same as font tag face property. Work for ANY tags.	font-family: impact;
Font-weight	normal, bold, lighter, bolder	Same as b tag. Work for ANY tags. lighter, bolder makes text lighter or darker than default.	font-weight: bold;
Font-style	normal, italic, oblique	Same as i tag. Work for ANY tags. Oblique attribute applies slanted style for fonts with such settings	font-style: italic;
Font-variant	normal, small-caps	No identical HTML property. Work for ANY tags.	font-variant: small-caps;
Text-decoration	none, underline, overline, line-through	Same as u tag, strike tag. Work for ANY tags. Underline, overline, line-through can be used together with a space seperating each attribute.	text-decoration: underline overline;
Text-transform	none, capitalize, uppercase, lowercase	No identical HTML property. Work for ANY tags. Text is left as is when set to none. Otherwise it is forced to whatever settings used.	text-transform: capitalize;
text-indent	number value in pixels, cm, inches (in) etc or in %	No identical HTML property. Work for block tags (eg: p, div, span, table). Gives a first line indentation by specified length. % values is indented according to width of tag. There might be problems using this property.	text-indent: 20px;
text-align	left, right, center, justify	Same as align property. Work for block tags (eg: p, div, span, table). justify creates alignment on both left and right side. Needs specified WIDTH setting.	text-align: center

Borders, margins, padding, width and height properties

Property	Attributes	Description	Example
Width	number value in pixels, cm, % etc...	Same as width property. Change width of the "box" for ANY tag	width: 90px; (border added)
Height	number value in pixels, cm, % etc...	Same as height property. Change height of the "box" for ANY tag	height: 50px; (border added)
border	3 attributes to specify in the following order: [width] [color] [style] width - thin, medium, thick or number in px color - name or hexcode style - none, dotted, dashed, solid, groove, ridge, inset, outset, double	Similar as table border property only for ANY type of tags. Width setting is a good idea.	border: 3px white outset;
Margin	number value in pixels	Adds spaces OUTSIDE border of tag "box". Similar as table margin property only for ANY type of tags. Width setting is a good idea.	margin: 5px; (border & width added)
Padding	number value in pixels	Adds spaces INSIDE border of tag "box". Similar as table padding property only for ANY type of tags. Width setting is a good idea.	padding: 5px; (border & width added)

Background properties

Property	Attributes	Description	Example
background-color	color name or hexcode color	Same as bgcolor property. Works for ANY tag. Width settings recommended.	background-color: #D9D872;
background-image	url('link of image');	Same as background property. Works for ANY tag, width settings recommended.	background-image: url('http://images. neopets.com/ items/toy_bob _plushie1.gif');
background-repeat	repeat, repeat-x, repeat-y, no-repeat	No identical HTML property. Works for ANY tag width and height settings recommended. repeat-x - tiles horizontally repeat-y - tiles vertically	background-repeat: no-repeat; (background, border added)
background-attachment	scroll, fixed	No identical HTML property. Works for ANY tag width and height settings recommended when not using in BODY tag. scroll - moving bg fixed - bg is fixed to the spot on screen	background-attachment: fixed; (background, width, height, border and overflow added to show effect)
background-position	2 attributes to specify: horizontal and vertical position horizontal - left, center, right vertical - top, center, bottom	No identical HTML property. Works for ANY tag, width setting REQUIRED (height recommended) unless used in BODY tag.	background-position: right bottom; (background, background-repeat, border, width added)

Internet Explore css filter properties

The filters listed are the ones frequently used in lookups. Remember that css filter are only supported by internet explore. This will NOT work for any other type of browser!

NOTE: the declaration for filters are slightly different than "normal" css syntax. This is the way it works:

tagname {filter: filtername1(property1=attribute1, property2=attribute2, property3=attribute3) filtername2(property4=attribute4);}



next page

Page © Nightning 2004
Punchbag bob and sid image by Neopets, modified by me (Nightning).
You MAY NOT use or copy graphics or layout coding without my explicit consent.