ForumsSupport ForumHTML tutorial

76 23257
master565
offline
master565
4,107 posts
Nomad

<a name= "uphere"> </a>

<h3>Chapter list: </h3>
<br />

<a href="#intro">1) Intro
</a>

<a href="#c2">2) Headers
</a>

<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 &gt. 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.

  • 76 Replies
ethan3300
offline
ethan3300
100 posts
Shepherd

[marquee bgcolor="blue"]So it goes something like this I believe am I correct ?[/marquee]

Patrick2011
online
Patrick2011
12,321 posts
Treasurer

[marquee bgcolor="blue"]So it goes something like this I believe am I correct ?[/marquee]


You need to use <> instead of []. Also, posting in any shade of blue or green in the forums is considered impersonation, so you should use shades of red and gray instead. Just make sure it's not so bright that it's unreadable.
megacooper
offline
megacooper
191 posts
Peasant

how do u do hyperlinks that say like "This is a link to my page" without saying all the http:armorgames.com/user/megacooper stuff?

Patrick2011
online
Patrick2011
12,321 posts
Treasurer

how do u do hyperlinks that say like "This is a link to my page" without saying all the http:armorgames.com/user/megacooper stuff?


On the forums, you can use BB Code. However, that is off-topic, so I will simply redirect you to the right place.
megacooper
offline
megacooper
191 posts
Peasant

thank you

AceofSky
offline
AceofSky
767 posts
Blacksmith

This was actually pretty helpful.
I care to add on with my knowledge of HTML.

Just like Master565 said, Headers are defined as {h1} {h2}...all the way to {h6}. {h1} is the largest while {h6} is the smallest.

Moving on. You always have to remember to end your codes like you did with bb codes. They are both the same in ending.
Ex: {h1}Always Remember to END!{/h1}
Ex: Always Remember to END!

For the people confused with this matter and are embarrassing themselves...remember that this
{ =

Also I wouldn't make your About so fancy, moderators are disliking the things HTML is doing. One or two colored codes are fine.

Also, if you want to ever write regulary.
You can type
{p}Paragraph{p}
Paragraph

That's not useful in the abouts too much haha ;D

thaboss
offline
thaboss
1,649 posts
Nomad

FOR THE LAST TIME, HTML does NOT work in the forums! They disabled it! It makes '' disappear. (Because you won't see them, whats in the quotes are greater than and less than signs, which is what's used for html tags.)

thaboss
offline
thaboss
1,649 posts
Nomad

That's why the greater than and less than signs don't show up. But yeah. It totally works in profiles.

Sorry, thaboss keeps misreading and getting all worked up.

Jacen96
offline
Jacen96
3,087 posts
Bard

{font size="12" face="ariel" color="green"} this is a test to see if i understand this. {/font}

Jacen96
offline
Jacen96
3,087 posts
Bard

{font size="12"face="ariel"color="green"} will this work, if it doesn't what am i doing wrong? {/font}

Patrick2011
online
Patrick2011
12,321 posts
Treasurer

@Jacen96: You are supposed to do < and > (if those characters are disabled, it's less than and greater than), but HTML is disabled in the forums and comments.

thaboss
offline
thaboss
1,649 posts
Nomad

Thaboss doesnt want to be all annoying and stuff, but isn't stuff like {b} and {i} and {font} deprecated? Shouldn't people do something like {p style="color#, rgb, rgba, hsl, whatever); font-weight:700; font-style:italic; text-decoration:underline;"}blah{/p} instead of {u}{b}{I}{font color="red"}blah{/font}{/I}{/b}{/u}. And for size use the font-size:12px, and for type use font-family: (family here)Obviously the second one is much easier, and it works, but.. The first ones more proper. Right? It's technically inline CSS, but... Thaboss likes it better.

Patrick2011
online
Patrick2011
12,321 posts
Treasurer

Thaboss doesnt want to be all annoying and stuff, but isn't stuff like {b} and {i} and {font} deprecated?


There are BB codes, which makes the second work better than the first. I actually prefer the second to the first, unlike you.
Jacen96
offline
Jacen96
3,087 posts
Bard

okay, i finally figured it out. thanks for your help.

boomman2u
offline
boomman2u
33 posts
Nomad

Test comment.

Showing 46-60 of 76