hadou takes you on a learning extravaganza as they explain some HTML tricks

⇦ Basic HTML tags

◆ <h1> </h1> -- this is a header tag, they vary depending on the website. Use it to make bigger text. There are also h2, h3, and h4 tags which do the same with varying sizes.


◆ <b> </b> -- this is the bold tag, it makes your text thicker see?


◆ <i> </i> -- this is the italics tag, it makes your tags.. well italic, though TEFc's version actually changes the font too, see, It's called 'georgia' .

* extra special thing * -- [ i ] [ /i ] is the same tag usually but here it is actually different from the HTML version since it doesn't change the font. It just italicizes it.


◆ <u> </u> -- this is the underline tag, it adds lines under your text, like that.


◆ <strike> </strike> -- this is the strike tag, it adds a line through your text, it's like crossing it out i suppose.


◆ <center> </center> -- this is the center tag, it centers anything inside of it.


◆ <left> </left> -- this is the left tag, it throws everything to the left. THIS IS THE DEFAULT ALIGNMENT OF EVERYTHING.


◆ <right> </right> -- this is the right tag, it shoves everything inside it to the right.


◆ <div> </div> -- the 'box' tag, it makes a box that you can make pretty with css or html.

for more check out this link; http://endlessforest.org/community/filter/tips

⇦ Tables

Tables are my personal favorite code, I use it in ALMOST EVERY SINGLE biography I've made here. It's good for organization, and keeping things evenly aligned.

Here's an example of a basic table looks like on TEFc;

ONE	TWO
THREEE	FOUUUUR

See how everything is perfectly aligned and shit? It's nice. TEFc does default an annoying white line above the table which you may or may not like. That can be removed with CSS but we ain't talking about that.

You can use tables to align divs next to each other, above or below each other. You can add 'styles' to them exactly like a div.

Now the code for that table is here; http://pastebin.com/SEE5Hhv5

BUT lemme explain what each tag does. First you start with the <table> tag, it's self explanatory it just means that this is gonna be a table. Then you start a ROW, which is the <tr> tag, this keeps things beside each other so if you only add one set of TR you will only have one ROW on your table. The table I made has two rows, and so it has two sets of TR tags. Next comes the <td> tag, which is the separate boxes. My table has four sets of TD tags in it for four sets of boxes.

I love tables, if you have any questions lemme know.

⇦ Hovers

Yeah you thought hovers were only for fancy smacy CSS, well you were wrong. You can add an hover to your plain text or link when ever and where ever.

Plain Text
<span title="hovering texty poo">hover me bby</span>
ex. hover me bby

Isn't that fun. You have to hover it for a few seconds though before it pops up. You can use this for whatever your wildest dreams desire.

URLs or Links
<a href="url here" title="hoveringinging">TEXt</a>
Hover this hot link wow

The link is useful if you wanna tell people where the link is taking them, or what it's for before the click it. Maybe even a warning. There are many wondrous things you could use it for.

⇦ Image Codes

HTML has many little image tricks, and all of them can be combined. But let's just explain them one by one and then do that at the end.

Inserting an Image
You could use the BBCode version which is easier and shorter, or you could use the HTML way which allows for so much more.

The basic HTML img tags are;

<img src="URL HERE">

This tag does not require a closing tag to follow it, the image URL is inserted in the code it self.
I'll use this URL to a pixel I drew awhile back;

http://fc05.deviantart.net/fs71/f/2014/289/3/9/lil__bouncing_deer_by_mothbone-d831u68.gif

When you put it in the code, it turns into the full image!


WHOA

It's as easy as that! But wait there's more, you can ADD to the code to do a whole bunch of things like... resize your image, put hover text on your image, align it and even add styles like a DIV.

Resizing your Image
Now we know how to insert images but how do you change it's size?
It's easy, you just add Height="#" or Width="#" into the code, before the ending '>'
It will look like this;

<img src="URL HERE" height="#" width="#">

You won't keep the #'s in there, instead you'll enter a number for how big you want the image to be in pixels [px] or percent [%]. If you want to use the percent realize it will change depending on the viewers screen size so I tend to not use it.

I'll show you an example with the image I posted above.
I'm going to insert the height '20px' and width '20px' to make it smaller.

aWE it's so small. But what if I put... 200px in for both?!

It's big now! And very blurry.. ehe.

I know you're probably interested in seeing it like 200px high and 20px wide so for laughs;

amaZinG

Aligning your Image
Now that you can resize your image, you may want to align it! Aligning it will make it go left, right or centered. It defults to left on TEFc so if you want the image to go right , you'll need to add in an extra code like this align="right".
It will look like this;

<img src="URL HERE" align="right">

Let's test it with my pixel deer, and align it to the right.


hey look it's over there now!
But what about center? Can we try that?

.. Oh? I must have done something wrong??
NOPE for some reason TEFc doesn't work with align center in images. If you want to center an image you'll have to do it the old fashion way <center> </center>.

Adding hover text
This is my favorite HTML trick, and I use it a LOT. If you check my signature, try hovering it and you'll see that I use it there ;v;
You may be surprised since the CSS text hovering code is a bit of a hassle but this is not!
It's as easy as the rest of the image codes, you just insert this;

title="whatever you want to hover"

It will look like this in the full code;

<img src="URL HERE" title="whatever you want to hover">

Now let's see how that works on the example I've been using


Did you hover over it? It may take a few seconds to pop up but it's there! Now how much can you write in it?
As much as you want!



Putting it ALL together
So, now that you know how to do all that separately let's add all of them together to see what happens. To do this just keep adding each section to the code, it ain't hard! It'll look like this;

<img src="URL HERE" height="#" width="#" align="right" title="whatever you want to hover">



I resized it to 150px 150px, aligned it to the right and added a hover!

Isn't that neat??

Any questions on it, lEMME KNOW