<a href="#c3">3) Stylizing color and fonts and sizes </a>
<a href="#c4">4) Page jumps </a>
<a name= "intro"> </a>
<H3> Intro </h3> <br />
Hello there, this is a simple tutorial I made to teach people how to use the new HTML support. This will show how to work with the useful and supported tags.
First things first, all HTML tags are enclosed in angle brackets (< and >. This is just the way web browsers know that what follows is HTML. <br />
<b>IMPORTANT NOTE: all HTML examples in this tutorial will replace all angle brackets with normal brackets All < = { And all > = } I am doing this so that you can see the HTML I am writing for this tutorial without the website displaying the example as the finished product.</b>
HTML tags are started with the tag in the first set of brackets, the content the tags apply to, and ended by that tag with a slash in front of it in the second set of brackets.
Example: â{tag} content {/tag}â
The tags in this tutorial that will be used are
h3, a, and font.
<a name= "c2"> </a>
<h3> Headers </h3> <br />
Headings are simply used to make titles and the such larger. They are defined with the tags {h1}, {h2}, {h3}, {h4}, {h5}, and {h6}. <b>Remember that all brackets are really angle brackets</b>. The larger the number, the larger the text. <b> Unfortunately, for no particular reason, AG only seems to work with {h3}, and any other sizes will just show up as normal text. In case this is just a glitch and will get fixed, I'll still talk about headers as if you can use any number. </b>
The format for this tag is as follows
{h#}(the text you want to be large) {/h#}
So for example, if you wanted to make something with an h3 size header, it would look like this
<h3> This is large text </h3> <br />
and the HTML for this was
{h3} This is large text {/h3}
<a name= "c3"> </a>
<h3> Stylizing color and fonts and sizes</h3> <br />
Using HTML, you can change the font, the size, and the color of the text. To do so, you will use the {font} tag. The {font} tag is slightly different, because in the first part of the tag there is more information about what youâre changing. The format for the {font} tag is this
{font size="(size)" face="(name of font)" color="(color of font)"} The text you want this applied to {/font}
You would replace (size) with the size you want for the font (you use a number, such as 12). You would replace (name of font) with the name of the font (Iâm not sure AG supports all the fonts. And you would replace (color of font) with whatever color you want. You can use name or hex value for color http://www.w3schools.com/html/html_colornames.asp
<b>Donât ignore the quotation marks, those are necessary. </b>
Example:
{font size="12" face="ariel" color="red"} This is an example sentence {/font}
This would turn into <br />
<font size="12" face="ariel" color="red"> This is an example sentence </font>
<a name= "c4"> </a>
<h3> Page jumps </h3> <br />
As most people know, you can make links on your profile to bring people to your messenger. Now you can do that to bring people anywhere on your profile. The tag we are using is the {a} tag. The {a} tag is usually used to link people to other pages, but since that is easy to do with the link button, we are going to use it for page jumps. Like the {font} tag, the {a} tag has some information in the first part of the tag. The first part of a page jump is as follows
{a name="(name of link)"} {/a}
This tells the page that this is where you want to jump to. If you place this at the top of your profile, whenever anybody clicks the link we are going to create, it will bring them there. Here is how to make the link
{a href="#(name of link)"} Clicking this text will make the page jump {/a}
Two things to note:
1) (name of link) is changed to whatever you want to name it. You can make multiple page jumps by making multiple names 2) The # <b>is</b> required before the name of the link, so if you named it âlink1â, you would put â#link1â in the quotation marks. This is only for the link, do not use a # in the first part of the page jump where you tell it where to jump to.
Here is an example of a page jump.
<b>Put this at the top of a page</b>
{a name= âuphereâ} {/a}
<b>Put this where you want the link to be </b>
{a href="#uphere"} Click here to return to the top of the page {/a}
<b>And it will look and work like this</b>
<a href="#uphere">Click here to return to the top of the page</a>
<h3> Images, links, bold, italics </h3> <br />
As just an ending statement, Iâm not going into these because you can already use the buttons above the post box, which are generally easier to use.
If anybody has any questions about anything in this tutorial, feel free to ask.
Final note: I hope all the HTML and formatting came out correctly, this was typed up in Word.
Im not sure if this blue is ok, sure its not look like the mod blue, but imo its better to get an "ok" from a mod befoire you use it, so first ask one of them you could do that.
I realize that light blue isn't necessarily allowed, but I was just testing an HTML code that someone else started. In real posting, the light blue should not be used, but the orange should be OK. Also, in the light blue test, I called the color a "disallowed" color because I knew previously that it is not OK to impersonate a mod by posting in blue.
I found out how to do marquee, so I will give the code using [] instead of <>:
Marquee uses the marquee tag like this:
[marquee]this is a marquee[/marquee]
Result:
<marquee>this is a marquee</marquee>
Marquee also has multiple parameters that can be set. Each will be introduced with a header.
<h3>Background Color</h3>
A marquee can be set to have a background color like this:
[marquee bgcolor="red"]colored marquee[/marquee]
When posting a marquee with a background color, you are not limited to red. I will use red for testing purposes though (I could use blue or green, but that would be impersonation). Here's the result of the above code:
<marquee bgcolor="red">colored marquee</marquee>
<h3>Width and Height</h3>
You can also set a width and/or height to a marquee. If you use a background color, this sets the dimensions of the background. You can also use this without a background color, but only the width would work, and only to limit the amount of text that can show up at once. Therefore, I will only test dimensions with a background color. Here's the test code:
[marquee bgcolor="red" width="250" height="25"]Testing dimensions with anti-spam in order to show how the width parameter limits text.[/marquee]
This is what it would look like:
<marquee bgcolor="red" width="250" height="25">Testing dimensions with anti-spam in order to show how the width parameter limits text.</marquee>
<h3>Direction</h3>
It is possible to set a direction parameter. Normally, the marquee moves left, so setting direction to left is useless. However, this is how to set the direction to right:
The direction can also be combined with a background color and/or dimensions using this order:
[marquee bgcolor="red" width="500" height="22" direction="right"]background and right stack[/marquee]
These are the results:
<marquee direction="right">testing right</marquee> <marquee bgcolor="red" width="500" height="22" direction="right">background and right stack</marquee>
<h3>Behavior</h3>
There is a behavior parameter that can change the behavior of a marquee. Currently, the only known use of this parameter is to make the marquee alternate. This can be used with or without a background and dimensions. If you use this parameter, then direction is irrelevant, so I will not test the combination of behavior and direction. I will test behavior with and without a background. Here's the code for each:
[marquee behavior="alternate"]without a background[/marquee] [marquee bgcolor="red" width="300" height="25" behavior="alternate"]with a background[/marquee]
Now for the results:
<marquee behavior="alternate">without a background</marquee> <marquee bgcolor="red" width="300" height="25" behavior="alternate">with a background</marquee>
<h3>Scroll Delay</h3>
The last parameter that can be added to marquee is a scroll delay. It can stack with any other parameters but is always inserted last. Here's an example:
[marquee bgcolor="red" width="600" height="17" scrolldelay="100"]this is slower than a normal marquee[/marquee]
There is a certain marquee speed that is used when the scrolldelay is not used, and this cannot be faster, but it can be slower if the number for scrolldelay is high enough. As far as I know, this number needs to be above 50 to have any effect. Here's scroll delay by itself:
[marquee scrolldelay="150"]slow and boring[/marquee]
Here are the results of the two tests:
<marquee bgcolor="red" width="600" height="17" scrolldelay="100">this is slower than a normal marquee</marquee> <marquee scrolldelay="150">slow and boring</marquee>
<h3>Notes</h3>
You can edit the font inside a marquee by inserting the proper code inside the marquee code. Here's an example of a highly coded marquee:
[marquee bgcolor="red" width="400" height="30" behavior="alternate" scrolldelay="120"][font color="777777" face="arial" size="4"]gray text inside a red background as a slow alternating marquee[/font][/marquee]
Results:
<marquee bgcolor="red" width="400" height="30" behavior="alternate" scrolldelay="120"><font color="777777" face="arial" size="4">gray text inside a red background as a slow alternating marquee</font></marquee>
Also, I recommend keeping marquees to abouts, especially if you are going to use blue or green as either a font color or a background. In addition, I will post this tutorial on my about since not everyone will see this thread.
Why the heck are you using {} when the guide specifically told you to use < > ? Also, for the love of html, please remember to close your codes as well.
Why the heck are you using {} when the guide specifically told you to use < > ? Also, for the love of html, please remember to close your codes as well.
I would try to get it changed to make the opening post tell you to do this more than twice, but I prefer to sit here and not answer people who make that mistake because they didn't read the post.
