HTML Guide

[smokey_locs2002]

Here is a guide from a friend...More of a fiend. He will most likely kill me for posting this..but oh well to you. Edit by me.

When you're posting, have you ever found yourself intimidated by the daunting, "Edit As HTML" button at the bottom of the screen?
 
Don't worry. You're not alone. We all have to start somewhere, and to somebody unfamiliar with computers, or the internet in general, something like HTML may seem impossibly complex and foreboding. Contrary to popular belief, however, HTML is rather straight-forward and simple once you get the hang of it. HTML, or Hyper-Text Mark-up Language, is simply what most of the internet uses to modify websites. HTML works in the form of tags. These tags signify what you are going to do with the HTML. There are a number of different tags, but only a few of them are supported on the boards, so I'll just do a brief overview of how to both how to create and edit your own HTML.

First, we need to cover the basics:

Every HTML tag will have an opening and a closing. The opening tag determines what is going to happen in HTML, as well as when this effect begins, and the closing tag lets the HTML know when to stop the effect. Every tag in HTML must have an opening and closing tag. You cannot have just an opening tag, or vise-versa. Furthermore, all HTML is concealed within the two greater-than/less-than brackets < and >. So, for example, if you wanted to make text centered, you'd type to signify when to start centering the text. When you want to end the tag, you need to add a forward slash in between the two brackets and the tag itself. Using the same example, then, when you wanted to stop the text from being centered, you would type, . The whole tag would look something like: Centered text goes here.. Get it?

Great. With that covered, we can begin to go over a few of the more common tags. (It will be assumed that you are already in the HTML editor when you're modifing the HTML.) I will also give examples of how the same effect is achieved in the graphical editor, because there are very few effects that can be achieved only through the use of HTML. The most rudimentary tags deal with the modification of simple text. These are: , , , and .
will italicize text, like so. This is achieved in the graphical editor, as well, in one of two ways. The first way would be to simply select the button with an I skewed slightly to right. The second way is to simply hold down Ctrl and press I. This will automatically begin to italicize your posts, and when you're doing italicizing, simply press Ctrl + I together again, and it will stop italicizing.
 
will underline text, like so. Again, this is achieved in the graphical editor by pressing the U with and underline beneath it. Ctrl + U will also begin underlining your text in a similar manner as expressed above.
 
will bold text, like so. Once more, the bold B will achieve this effect in the graphical editor. Ctrl + B simultaneously is the keyboard shortcut here.
 
will strike-through text, like so. The S with a strike-through in the graphical editor will - you guessed it - strike-through the text. Unfortunately, unlike the three other tags mentioned above, I do not believe there is a hotkey for strike-through, so, you'll either have do it in HTML (ex: strike-through, or use the button in the graphical editor.
Now that we've got those down, we can move onto some more complicated tags. Namely, the and tags. These two tags accomplish a good portion of the more advanced text modifications we see on the boards. The first thing we will go over is the tag. can be modified in many different manners, and the tag itself really doesn't do much at all. In order to use properly, you need to modify the tag itself with more specific functions. The most basic functions (and the only ones that really apply here) are size, color, and face. In order to use them correctly, you must tell the HTML how it's going to modified. This is achieved by placing an = and "" after the specific function. Also, these functions are placed after the tag itself, so, a tag changing the font face (name, to most people) to Arial would be, . (If you want to add more than one modifier, such as the color red, simply add it directly after the first modifier, but still within the tag itself, like this: . The same rule holds true if you want to add yet another third modifier.) These three modifiers can be used as follows:

will change the font that you are using. The name of the font is what you are going to put between the quotation marks. You can essentially use any font that is installed on your machine, as long as you know the specific name of it, but keep in mind that simply because you have the text, doesn't mean that everybody does. (If they don't, then the text going to show up in Courier, which is a less-than-pretty font.) Thus, it's better to stick to the basics, such as Arial, Comic Sans, Verdana, or Times New Roman. (These fonts come preinstalled on most Windows machines, so there shouldn't be too many issues with these fonts.) A little known fact is that you can actually list more than one font face to use, just in case somebody doesn't have a certain font installed on their machine. This is achieved by placing a comma directly after the first font, like so:  
determines the size of the font. This is accomplished by modifying it with a multiple that determines how much larger or smaller the text is going to be than the default font size. For example, if you want to make the twice as small as the default, you'd use, , where "-2" signifies how much smaller the font is; conversely, you can make the text a number of multitudes larger by using "+n", where n indicates how much larger you'd like to make the font. Fortunately, there's a nifty font size determiner already built-in to Lithium, so selecting on of the sizes from the Font Size drop-down menu will usually suffice.
 
will determine the color that the font will show up as. Usually, this is restricted to the 216-color web-safe palette, but you can use any practically any color you could imagine, assuming you have a program, like Color Cop, which can convert non-web-safe colors into HEX for you. HEX, if you're wondering, is simply the manner in which HTML determines the color of the font; it is always six characters in length, is always alphanumerical, and is always preceded by a #-symbol (an example of a HEX code is something like "#FF00FF"). In actuality, HEX is but one of two methods you can use to get the desired result with your text, the second of which we'll get to later. The first method would be to simply add the HEX code in between the quotations, like this: . Of course, this example is the color white, but depending on the HEX code you want to use (which again, can be obtained by either looking up the web-safe palette and choosing a color from there, or by using a program like Color Cop), all you need to do is copy and paste the HEX code you want in between the quotation marks to have the text reflect the color you are desiring. The second method I mentioned earlier is to use standard colors that are recognizable in HTML, like red, green, blue, etc. You can accomplish using these colors as follows: . As there are a limit to the amount of colors you can achieve this way, this somewhat restricts the amount of colors you can freely use. You can change you font color as well, by pressing the button with the letter 'A' and the color red beneath it. However, the color pool there is limited to the 216-color web-safe palette. (If you wanted to use non-web-safe colors, it'd definitely be advantageous to use the Color Cop program to first get you the HEX combination you need, then to go into HTML to insert the code directly there.)
Also, remember that all modifications are closed by tag. Simple enough, no?

Ok then, we'll move onto the tag, which seems to be the tag the most amount of people have a problem with. This is the tag used to create hyperlinks. There are actually two ways to use , and you don't even necessarily need the " href="" " part. (You can do http://www.website.com, and it will produce a clickable link that says "http://www.website.com".) For the purpose of this example, however, we're using href="", as this method allows you to customize what the link is going to say. For example, you want to make a hyperlink that says, "Click here for free porn!". First thing you'd do is set up the tag: . Note how the URL fits nicely inside the quotation marks. (Notice a pattern here yet?) After the tag, you'll want the text that will be clickable, so, you'll type after the opening tag, "Click here for free porn!", finally you'll close with . (Not , a common mistake. Remember, we're modifying the tag, in the same manner as we did with .) Also, a small elaboration of the tag is the target="" modifier. All this does it determine how the link will be opened. If you set it to target="blank", then the hyperlink will open up in a new window when somebody clicks on it. If you don't add the " target="" " part, then the link will simply open in the same window as the person's browsing. In any case, the board software makes hyperlinks absurdly easy. When you want to create a hyperlink, all you do is click on the button the has a globe with a paperclip on it, and copy and paste your URL in there, and BAM!, you'll have an easy, intuitive little hyperlink, all to yourself. If you want to make certain text clickable, simply highlight the text you want to have turned into a hyperlink, repeat the process, and you'll have yet another hyperlink of your own. Every now and then, however, the board software will fudge, and you'll get a broken hyperlink. If this ever happens, you can just go back and fix the HTML manually, using the information listed here as reference if needed.


------------------------------------------------------------------------------------

Advance.


Due the general complexity of these effects, as well as the space required to explain, I am going to breaking this guide into separate sections. If you want to skip to any given section, simply type the reference number located next to each topic into your find box (that'd be Ctrl + F). This will allow you to skip directly to the section that you want to overview. It also helps the general organization of this guide. Thus, this guide shall be layed out as follows:
I. Introduction (#H5000)
II. Text Effects (#H5001)
A. Background effects (#H5101)
B. Hyperlink effects (#H5102)
C. FILTER effects (#H5103)
III. Effects (#H5002)
A. Background effects (#H5201)
B. Border effects (#H5203)
IV. Acknowledgements (#H5003)
I. Introduction
(#H5000)
 
The purpose of this guide is to help people with a fundamental grasp of the inner-working of HTML further advance their adeptability of it. As such, I assume that we already have a general comprehension of the ideas that I present here. If at any time you find yourself completely confused by what I'm saying, please refer to my initial post, as well as the conversation that occured afterwards. It would be nice if I could go over both simple and complicated HTML in the same guide, but for the sake of fluidity, I am keeping the two separate.
 
Furthermore, the ideas that I present here are somewhat complicated. It is possible for you to transfer and combine these ideas, so even though I may only be going over one particular effect, realize that you can easily combine that effect with another one to create yet another effect. So, think of these as the building blocks for more effects.
 
Moreover, try not to over-complicate things. You may find yourself checking out more advanced HTML guides after you go over this one, and find even more neat effects to put into place. While this is fine and dandy, we must also realize that these boards have restrictions. For instance, while a majority of the information gone over here is actually modified CSS (a sub-language within HTML that allows for elaborated text effects), the boards restrict any parenthetical commands. This vastly limits the amount of flexability that we have with these effects. If you tried to add the aforementioned commands, you'd find out real quick that they are forbidden. The basic idea is to take what you see at a visceral level, and to try not to combine every single filter into a huge conglomerate of code. The point is to give you the resources needed to give you a rough understanding of the effects, but at the same time not have you try to implement each command into your text. These effects are neat, but it is very possible for you to go overkill with them, so please exercise a bit of discretion when using them.
 
With that said, I hope you find this guide informative, easy-to-navigate, well-written and cohesively organized. Most all of, however, I hope that it helps you further understand the abilities and limits of our forum's HTML.
II. Text Effects
(#H5001)
 
To begin with, I think it is best to take a look at the most broad aspect of the forum's HTML. That is, the multitude of different effects that you can achieve by editing the formating of the FONT tag. On top of the the simple text effects such as font color, size, and formatting, there are style effects that allow you to - among other things - make text glow, flip horizontally, invert, shadow and conceal itself.
 
Most of these said effects are achieved through CSS, which I mentioned earlier. CSS, or Cascading Style Sheets, are basically a different set of rules, like HTML, that a web browser uses to display text on a webpage. CSS was first introduced around 1996, and has since spread across the internet to the point that it is now considered a standard, with nearly every latest-generation browser supporting it extensively. Again, however, the boards are somewhat restrictive on the amount of CSS that we can use, so try not to get the idea that every effect that you find on the internet will be allowed to be used here. For this guide, of course, I will only cover the CSS that we know is supported by the forum at this moment.
 
In any case, I will begin with the least complicated of text effects, which includes changing the background color of the text.
 
A. Background effects
(#H5101)
 
We are allowed to change the background color of the text that we are writing. This has a variety of uses, ranging from contrasting your text to marking spoilers. For the most part, people opt for the latter effect, since it seems to be the feasible usage of the effect. So, in this example, I will list ways that you can mark spoilers.
 
In actuality, there are a total of two different ways that you can mark your spoilers. The first is to simply have text with a white background with a white text, and the second is to have a black background, with black text. Regardless of which method you choose, the point is to make it so that your text must be highlighted in order to read, so the font color must always be the same as the font's background.
 
If you want to achieve a spoiler box like this:
Spoilers below, highlight to read:

Quentin Tarantino likes to touch little boys.

You would use the following command:

[for white text]

[spoiler text goes here]

[for black text]

[spoiler text goes here]

Notice that in each case the background color was the same as the font color. That is the key to creating spoiler tags like this.

B. Hyperlink effects
(#H5102)

Hyperlink effects are little bit more complicated that background effects, since a lot of factors can affect it, and this is the first time that we're actually going to bring CSS into play here. Hyperlinks can also be affected by the filter commands listed in the next section. One may question the logic of going over something like this before we've gone over everything that effects it, but the fact is that there are an equal amount of effects that are pretty much exclusive to hyperlinks. Thus, I'm keeping those effects listed here, and then if you want to, you can combine the filter commands later to achieve your desired effect.

Before we get started, one thing you must realize is that the commands affecting the hyperlink must come after the initial command. For example, the HTML for a large bolded hyperlink to disney.com with green text would be as follows:

Click here for free pr0n!!!

With that in mind, let's get started.

You may have noticed that, by default, the board makes all hyperlinks underlined. If one so chose, they can actually remove the underline, like so. This is achieved by setting the text decoration to none. The HTML to do this is as follows:


From here, a number of options can be derived. You can change the color of the underline, or, if wanted, make the underline dotted. You can also overline text.

So, we have the following examples:

Hyperlink with an orange underline


[text goes here]

You would want to change the color of the text, which can be modified by changing the BORDER-BOTTOM color.

Hyperlink with a purple dotted underline


Hyperlink with a purple dotted underline

Notice how we changed the style from 'solid' to 'dotted'. There are actually a couple other effects that you can utilize from here. (You can find a little list right here.) But, for the most part, you're only going to be concerning yourself with the dotted command, since it looks so nifty.

Hyperlink with an underline and an overline.

[text goes here]

That pretty much covers the various hyperlink text effects that you may want to put into place. The next part of this would be hyperlink roll-over effects. That is, effects that only work if your mouse is overtop the hyperlink. Unfortunately, we're restricted from using roll-over effects that would change the color of the text, but it will allow us to change the cursor.

Check this list out:

East facing
South facing
North-west facing
South-west facing
Hour glass
Cross-hairs
Four arrows
Question mark
Text arrow

Now, move your mouse over each one of those, and notice how it changes over each one of them. This is achieved through the CURSOR style command, which modifies the cursor as it goes overtop the text. It has a number of different properties, most of which are pretty self-explanatory. (Again, if you want to, you can read more here.)

So, in summation, if you want a hyperlink that looks something like this:

Hyperlink with a purple dotted underline

The HTML you would use should look something like this:

[text goes here]


Once again, remember that you can change the color of both the hyperlink text, but also the underline. Also, note that all commands are separated by a semi-colon ( ; ).

C. FILTER effects
(#H5103)

Now, further than the simple hyperlink text commands are the FILTER commands. These are the real flashy commands that seem to be all the rage. On the whole, they're pretty simple, and you can combine them to create some nifty effects. These effects, not surprisingly, work from the FILTER command. Here's a list of them, followed by the HTML required to utilize them:

The GLOW filter

The GLOW filter

Blur Filter
The BLUR filter

The DROPSHADOW filter

The DROP-SHADOW filter

The SHADOW filter

The SHADOW filter

The WAVE filter
The WAVE filter

FLIPPED VERTICAL
FLIPPED VERTICAL

FLIPPED HORIZONAL
FLIPPED HORIZONAL

The LIGHT filter
The LIGHT filter

The X-RAY filter

The X-RAY filter

The INVERT filter

The INVERT filter
Please realize that although the font size in each of these examples is 4, you can still change the size of the font to whatever you wish. You can change the font color, too. These examples are to be taken as-is. The real fun here is tweaking everything to your own personal taste. Also, you can of course combine these effects to create even more effects.

Here are a couple examples:

Glowing, backwards, X-ray text
Glowing, inverted, upside-down, drop-shadowed text

Glowing, inverted, upside-down, drop-shadowed text
Glowing, inverted, upside-down, drop-shadowed text

Wavey, backwards and upside-down X-ray text

Wavey, backwards and upside-down X-ray text

So, there you have it. The FILTER command in all its beauty. One thing should be noted, however. That is, that you should avoid going overkill with it. Especially the glow filter. How much is too much? If you write text that looks like you could fry an egg on it, it's too much. If your text looks like a hobo just stumbled onto your text and vomited his evening's meal all over your text, it's too much. If you use it for more than a single sentence, it's too much.
Moving along, we come to the tag. This command is responsible for those neat boxes that you notice at the bottoms of people's signatures. It's actually one of the more flexible commands, allowing for a great deal of tweaking. Not only can you change the background, you can also change the border for a number of different effects (all of which were mentioned earlier when we went over hyperlink effects). Unless you're doing a signature, however, you probably won't find much use for this tag.

A. Background effects
(#H5201)

To start off, your SPAN will need a background color. Although not required, it does help the SPAN make itself more apparent, since the tag is invisible by default. I am going to again bring up the subject of marking spoilers, since it works pretty well for this particular example. We are going to use a SPAN with a black background, and we're going to make it so that the text needs to be highlighted in order to read. The result is going to look like this:

Spoilers: (Highlight to read)


OMGWTFBBQ! I'm the Pope! Don't make me slap you, woman!

Which, in turn, uses the HTML:

Spoilers: (Highlight to read)

OMGWTFBBQ! I'm the Pope! Don't make me slap you, woman!

Pretty neat, huh?

B. Border effects
(#H5202)

Now, once you've got your background in place, you're going to want to change the way that the border looks. As I mentioned, this actually uses the same functions as the hyperlink effects we went over awhile back. So, if you wanted to make a centered SPAN box that is approximately 450 pixels wide, with a pink background, and a dashed, 2-pixel wide, blue border, that looks something like this:

So, this is a SPAN box, huh?

Well, I can't say I'm not impressed. Because, well. I'm not impressed.
And we'd be using the folowing HTML:

So, this is a SPAN box, huh?

Well, I can't say I'm not impressed. Because, well. I'm not impressed.

Pay attention to a couple things here. First, that all the commands that affect the border are concealed within one single command. That is, there is only one semi-colon separating it from the other commands, even though there are multiple functions affecting it. The next thing we should notice is that there are a total of four different border commands. You can actually edit the functions for each of the four sides of the span box. This helps if you want to give your span box a somewhat 3-D feel, by making the two borders adjacent to each other different colors. The resulting effect looks something like this:

Oh my, yet another SPAN box.

This one is at least three times more cool than the last one.
With the HTML:

Oh my, yet another SPAN box.

This one is at least three times more cool than the last one.

Note that the border style went from dashed back to solid. Also, I used two colors that contrasted nicely between light and dark. If you want, you can actually make each side have a different color and effect. Play around with the parameters a bit, and I'm sure you can create some pretty nifty stuff.

With SPAN covered pretty thoroughly, I feel we've pretty much gone over just about everything that I thought quantified "advanced". This has been an absolute blast to write, and I can only hope other people have as much going over it as I did writing it. Thank you very much for taking the time to go over this with me. Without the desire to help people, I would not have written this. Thank you again.

IV. Acknowledgements
(#H5003)

I'd like to tell you that all of the findings I explain here are my own. That would, however, be a pretty bad lie. Right now, I'd like to suggest a standing ovation for fellow-poster, The_Sartek. Without his invaluable insight, nothing here would be possible. He is truly a great poster, a great thinker, and a great teacher. (Just check out all the helping he does in my initial thread!) Words cannot communicate how greatful I am for his assistance and conjecture. If you happen to see him around, make sure you thank him for all the help he gives, the most of which goes vastly underappreciated.


Ok and their you have if you need any help ask me or my good friend RahXpheon . you can find him posting at www.adultswim.com

[smokey_locs2002]

Question. Is the HTML guide helping anyone at all?

[shinotebasiiackh]

I dunno. Chances are: if your posting in the HTML and DHTML section, then you know HTML.

[SonicChaos7]

It hasn't helped me since I know that stuff (took webmastering), but I'm sure it'll help others out.

[sk8rman]

it helps me alot!

[smokey_locs2002]

Originally posted by shinotebasiiackh
I dunno. Chances are: if your posting in the HTML and DHTML section, then you know HTML.

But not all know all. <_< I know all. But I'm a lazy know all.