Athene's HTML and Coding

This is for everyone who has been wondering how to make hyperlinks, boxes, etc. Remove all asterisks before using.

Basics:

To post a picture you use this
<*img src="IMAGE LINK"*>
The image link can be made on websites like TinyPic. With them you need to have a copy of the image saved on your computer. You upload the image onto the site and they give you the link.

To make a hyperlink
<*a href="WEBSITE LINK">TEXT HERE<*/a*>
In the website link area this is where you put the website's or web page's address. The text here is where you put the text you want hyperlinked. The last is merely a stop code. It keeps it from hyperlinking everything you post after the initial <*a href=""*>
An example would be posting a hyperlink for a lioness
<*a href="http://www.lioden.com/lion.php?id=509533270273"*>Nagi<*/a*>
It comes out as:
Nagi



Now that you've got the basics of how it works, here's some other simple and useful things:

Bold: <*b>TEXT<*/b> Bold
Italics: <*i>TEXT<*/i> Italics
Underline: <*u>TEXT<*/u> Underlined
Strike Out: <*strike>TEXT<*/strike> Striked out
Page Break: <*br> Used to create a space between paragraphs.
Paragraph: <*p>TEXT<*/p> Used to create paragraphs



A bit more complex basics:

How to make a text aligned how you want
<*p style="text-align:center;"*>TEXT<*/*p>
The one above allows you to make your text align to the center like the top of this post. You can change the center to left or right depending on how you want it aligned.

Colored text
<*font color="HEX CODE HERE">TEXT<*/font>
Different hexcodes are used for different colors. This website is a hexcode generator. You can find and get a code for whatever color you want with this.
Here are some basic colors:
Blue: 0000FF
Orange: FFA500
Purple: 800080
Red: FF0000
Yellow: FFFF00
Green: 008000
Grey/Silver: C0C0C0
Snowblind Blue: 6c9cc1

Highlighting
<*span style="background-color:#HEXCODE" >TEXT<*/span>
Like the above you will need a hex code for this. The color you choose will highlight the text.

Font size
<*font size="1">TEXT<*/font*>
There are different sizes ranging from 1-10.
Font 1
Font 2
Font 3
Font 4
Font 5
Font 6
Font 7
You get the point.

Font Styles
<*p style="font-family:verdana;">TEXT<*/p*>

This is what makes the different styles like verdana.

Or even Comic Sans!

This website lists some good web safe fonts.


More fun stuff

Headers
<*h1>TEXT <*/h1>
Once again there are different sizes of headers.

Header 1

- h1

Header 2

- h2

Header 3

- h3

Tables
<*div style="width:100px;height:100px;overflow:auto;border:1px solid; background:#HEXCODE;"*>TEXT<*/div>
This allows you to make tables in your den and posts. You can change the size by changing the width and height px. The overflow:auto means that if you write larger than the table that the scroll bar will automatically show up. The border:1px is the standard border size. You can make the border thicker by increasing that. The background color can also be changed with the hex codes. If you want a transparent background, just take that out. Below is the size of table I use in my den.
<*div style="width:820px;height:475px;overflow:auto;border:1px solid;">TEXT<*/div>

Scrolling Tables
<*div style="border:1px solid black;width:150px;height:100px;overflow-y:hidden;overflow-x:scroll;"*><*/div>
The one above creates a scrolling horizontal table. If you want a vertical one, simply change the overflow-y: to scroll instead of hidden and change the overflow-x to hidden instead of scroll.

Columned Tables
<*table border="NUMBER HERE" cellpadding="NUMBER HERE" cellspacing="NUMBER HERE" width="NUMBER HERE"><*tr>
<*td>Column 1<*/td>
<*td>Column 2<*/td>
<*/tr><*/table>
That's a lot isn't it? You enter the text for the columns where it says Column 1 and Column 2. Let me show you what that looks like. Here's the coding:
<*table border="1" cellpadding="1" cellspacing="100" width="300"><*tr>
<*td>Column 1<*/td>
<*td>Column 2<*/td>
<*td>Column 3<*/td>
<*/tr><*/table>
Here's what it looks like:

Column 1

Column 2

Column 3

Floating Boxes/Tables
<*div style="position:fixed;left:0px;bottom:0px;width:165px;height:200px;border:5px solid;overflow:auto;">TEXT<*/div>
Like the others you can resize this. These can only be used in dens. You can fix it anywhere in your den.

Picture resizing
<*img src="URL HERE" height=HEIGHT NUMBER width=WIDTH NUMBER>
Now that you can put in pictures and you've made tables, you can resize those images. Basically, but how large you want the width and height where it say and that is the only thing added. For this I would suggest pulling up IfranView or Photoshop because you can get the dimensions there. Or, you can use those same programs to resize them and upload them again.



Combining
This will show you how to combine all this. Now, most everything on this page can be combined.


Hyperlinking a Picture
<*a href="WEBSITE OR WEB PAGE LINK"><*img src="IMAGE LINK"><*/a>
Basically, instead of text in the middle of the hyperlink you add the picture.


Here's the coding I used to make the page title:
<*p style="text-align:center;"><*font color="#6c9cc1" size="4"><*b>PAGE TITLE OR TEXT<*/b><*/font>

I put the paragraph (p style) first to make a format for the page. If you want a whole page and not just that paragraph to be in that alignment, don't add the on the end or add it at the very bottom of the page. If I had wanted to under p style="" I could have also added in the font family from above. It would have followed as text-align:center;font-family:Comic Sans MS;.

I did the same with the font. Both color and size are under that category so you can add them on as shown above.

And then I just added the bold on. Make sure you get the <*/b>, <*font>, and <*p> in reverse order than what the beginning code was.


Den Coding
Den coding is something I will not get into it very complex and you have to have a good understanding of all this to make one. However, there are people on Lioden who will make free ones for you or will make custom ones for payment.
Here are some free den CSS: Di's Free CSS Codes!, Darklily's Den CSS, Winter CSS, and you can always search for more.

Was there something I forgot? Please comment below and I will add it in. If you need more help or want to learn more here is a good place to look.