Forums

ForumsSupport Forum

HTML tutorial

Posted May 7, '12 at 9:32pm

master565

master565

3,874 posts

Chapter list:

1) Intro

2) Headers

3) Stylizing color and fonts and sizes

4) Page jumps

Intro

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.

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.

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.

Headers

Headings are simply used to make titles and the such larger. They are defined with the tags {h1}, {h2}, {h3}, {h4}, {h5}, and {h6}. Remember that all brackets are really angle brackets. The larger the number, the larger the text. 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.

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

This is large text

and the HTML for this was

{h3} This is large text {/h3}

Stylizing color and fonts and sizes

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_colo … sp

Don’t ignore the quotation marks, those are necessary.

Example:

{font size="12" face="ariel" color="red"} This is an example sentence {/font}

This would turn into

This is an example sentence

Page jumps

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 # is 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.

Put this at the top of a page

{a name= “uphere”} {/a}

Put this where you want the link to be

{a href="#uphere"} Click here to return to the top of the page {/a}

And it will look and work like this

Click here to return to the top of the page

Images, links, bold, italics 

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.

 

Posted May 8, '12 at 3:56am

gaboloth

gaboloth

1,372 posts

What about this?

 

Posted May 8, '12 at 4:42am

Kasic

Kasic

5,569 posts

What about this?

That's called annoying, and no one should do it -.-"

What is the purpose in having an image scroll by at that speed? It's just bothersome, thus no reason to teach people how to do it.

 

Posted May 8, '12 at 6:02am

massmurrder

massmurrder

141 posts

lol trollface XD jk but is there small one of them? i mean how getting a pic

 

Posted May 8, '12 at 4:48pm

Patrick2011

Patrick2011

3,374 posts

What about this?

That's called annoying, and no one should do it -.-"

What is the purpose in having an image scroll by at that speed? It's just bothersome, thus no reason to teach people how to do it.

master565 also missed non-spam. For example, this guide did not cover radio buttons, even though master565 has radio buttons on his profile. Besides, the image is broken from what I see.

 

Posted May 8, '12 at 7:52pm

master565

master565

3,874 posts

What about this?

Even If i hadn't known about marquees, anything you do in HTML is easy to copy.

For example, this guide did not cover radio buttons, even though master565 has radio buttons on his profile.

Because that is a useless feature for this site. I'm not teaching people HTML, I'm teaching them what they need for this site.

 

Posted May 8, '12 at 10:59pm

master565

master565

3,874 posts

 

Posted May 9, '12 at 6:26pm

Patrick2011

Patrick2011

3,374 posts

Actually, it's "arial", not "ariel". master565 misspelled the font in the OP.

 

Posted May 9, '12 at 6:29pm

Patrick2011

Patrick2011

3,374 posts

@jsalmeron: I just realized that you used brackets. You're supposed to use the < and > signs. This is the result of what you're testing:

Ummm... Is this good?

 

Posted May 9, '12 at 8:04pm

master565

master565

3,874 posts

[font size="3" face="ariel" color="red"] Ummm... Is this good? [/font]

{font size="5" face="arial" color="red"} nice post {/font}

Both you need to be using the angle brackets, < and >, not the normal brackets i wrote the examples in, { and }

 
Reply to HTML tutorial

You must be logged in to post a reply!