HTML & CSS Guide
Basic HTML & CSS Guide to help you with your needs.
Brought to you by angelinink & i-petz
Sure! Let's begin =)
Every Code begins with a < and ends with a >
<br> = line break ... is used when you want to start a new line.
<p> = paragraph break or double space ... is used when you want to start a new paragraph or skip a line.
<center> = center ... is used when you want to center an object or text.
<b>Text Goes Here</b> = bold ... is used when you want to make font bold.
<i>Text Goes Here</i> = italic ... is used when you want to make font italic.
<u>Text Goes Here</u> = underline ... is used when you want to make font underline.
<s>Text Goes Here</s> = strikethrough ... is used when you want to make font
- If you are working on something and you only want one thing centered. You would add </center>at the end of the images or text.
- Yes, you can use all or some of the font codes together. they would look like:
- Notice how there are No Spaces in between the code beginnings and endings this is important. If there if a Space, The codes will not work.
That's easy too. =)
<font color="#669900" size="2" face="Georgia">Text Goes Here</font>
color="#669900" = this the color the text will appear. You can use Hex Colors (which are like the numbers shown) or Simple Names like White.
size="2" = this is the size the text will appear. Common Font Sizes: 1, 2, 3, 4, 5
face="Georgia" = this is the font face or style that the text will appear. Common Font Styles: Verdana, Times New Roman, Arial, Georgia, Tahoma
Example of what the above code would appear like on a page: Text Goes Here
If we wanted to make it bold:
<font color="#669900" size="2" face="Georgia"><b>Text Goes Here</b></font>
Example: Text Goes Here
- Yes, this can be done using either italic or underline as well.
The above codes work in shops, galleries, and lookups. Add your own colors, size, and font face.
That's easy as well. =)
- NeoHTML Fonts are a bit different than regular fonts.
instead of < > brackets. it uses [ ]
All the rest is about the same, except you can not use Font Faces that are more than one word.
(EG: New Times Roman, Monotype Corsiva) If the font face has spaces in it's name ... it will not work.
Below is a basic neoHTML font.
c=#000000 = this is the color
s=3 = this is the size
f=verdana = this is font face
- Note: All neoHTML fonts start out at a basic size 2. So if you want the Basic size, you don't have to add the s=2
You can also add the [b]For Bold[/b] [i]For Italic[/i] [u]For Underlined[/u]
[center]For Center[/center] [br]For A Break [p]For A Double Break
If we wanted to make it bold:
Easy ... Just add a [ to the end of the neoHTML (last thing written on that line.)
And add a ] to the beginning of the siggy line and either a [br] or [p] depending on how much space you want.
That would look like:
[center][fontc=#000000s=3f=verdana][b]neoHTML[/b][/font][
][br][fontc=#000000s=3f=verdana][b]siggy goes here[/b][/font][/center]
Feel free to use or alter the above codes. Add your own colors, sizes, font faces =)
Sure! Marquees are simple to create and fun!
Basic code:
Example:
Example:
bgcolor = background color ... any color you'd like to use.
width = sets the width of the marquee. the number is expressed in pixels or % of page width behavior = can be alternate or slide
directions = can be up, down, right, left
scrollamount = set the space, in pixels, between successive scrolls of the marquee and also affects it's speed. The higher the number, the faster it scrolls. (EG: scrollamount="5")
HTML tags = if you want to change the font style & color, these codes must be located outside the marquee tag. (EG: the <center> </center> in the above code)
Sure! Here's some codes:
- Note colored or transparent scrollbars only work in Explorer.
The above code works in shop, galleries & lookups. Add your own colors. =)
The above code works in shop, galleries & lookups.
If anything else on your pages is #00FF00, It will be Transparent as well! =)
A Horizontal Rule is a thin horizontal line.
Basic Code:
Example:
Example:
color = any color you'd like to use.
width = sets the width of the horizontal rule. The number is expressed in pixels or % of page width. size = sets the thickness of the horizontal rule. The bigger the number the thicker the horizontal rule appears.
The above code works in shop, galleries & lookups. Add your own colors, width & borderstyle. =)
The above code works in shop, galleries & lookups. =)
Sure! Here are a few table basics:
- Almost all tables start with <table><tr><td> and always end with </td></tr></table>
- Some tables for neopets do not have these. It depends on where the table is going to be used.
- Exception: do not put the table endings in your shop as your table will not go around your items.
- Note: When using these tables in your shop, anything you put under the table will be displayed in the table.
Feel free to use the above codes in their respective areas. Add your own colors, sizes, fonts ect. =)
The 1st code can be used anywhere.
border = this can be any number you'd like. The higher the number, the bigger/wider the border.
bordercolor = you can make this any color you'd like. Be it a Hex Color or a Color Name.
border style = these are some border styles: solid, dotted, dashed, inset, groove, ridge, double. Please Note that some of the border styles do not work on all tables and are harder to see on smaller borders.
width = you can adjust the width to the size you'd like
height = you can adjust the height to the size you'd like
font size = xx-small, x-small, small, medium, large, x-large, xx-large
cellpadding = sets the amount of space between the contents of the cell and the cell wall
cellspacing = controls the space between table cells
<tr> = defines a row in a table
<td> = defines a cell in a table
- These codes can be used on lookups as well as shops, and galleries.
- Some of these Codes only work in Explorer.
- Feel free alter and use them. =)
- Credit Banners are those little signs that say were something is from.
- Our Everything here is from I-Petz Credit Designs. Click Here
<body background="http://www.i-petz.com/bgimage/patterns/blu4.gif"><p><center><a href="http://www.neopets.com/guilds/guild.phtml?id=559031"><img src="http://www.i-petz.com/bgtg001.gif" border="0" alt="NWoF Guild"></a></center><p>
**First off here is an easy trick, hit enter after ever >
symbol,
this will break down the code into its separate sections. Makes it easier to read.
<body background="http://www.i-petz.com/bgimage/patterns/blu4.gif">
<p>
<center>
<a href="http://www.neopets.com/guilds/guild.phtml?id=559031">
<img src="http://www.i-petz.com/bgtg001.gif" border="0" alt="NWoF Guild">
</a>
</center>
<p>
***The highlighted code above is the background, DON'T DELETE THAT. Everything below that, go ahead and delete it. Then copy one of the Credit Design Codes and place it were you want the tag to
appear in your shop. That's it. Simple huh!
- If you are getting an Error while editing a Gallery, follow the below steps.
<style type="text/css"> body { background-image: url(http://www.i-petz.com/bgimage/patterns/101Met5.gif);}--></style><b STYLE="font-family: tahoma; font-size: 10px; position: absolute; top: 80; left: 150;">~~Backgrounds by www.i-petz.com~~</b>
Everything after the </style> can be removed.
Below is the Css Background Code Alone
<style type="text/css"> body { background-image: url(http://www.i-petz.com/bgimage/patterns/101Met5.gif);}--></style>
These are codes that have a <style> or <style type="text/css"> and the beginning and a </style> at the ending.
*** If you remove the Credit, You must either have a written Credit for our goodies or a Credit Design. Click Here
Thank you.
The Goodie Room
- Backgrounds
- Blogs
- Adoptables
- Cursors
- Music
Premade;
- Tables
- User Lookups
- Petpage Layouts
-
- HTML Guide
- Color Chart
- Font Styles
- Siggies
- I-PETZ Credit Tags
Important Notice
| In using any image[s] or information in I-Petz, you are agreeing to abide with our Terms and Conditions. |
Other
