Post by Roderick on Aug 21, 2008 0:39:41 GMT 12
Applies to Smile City
HowTo: HTML on this forum ........Post a reply
frup
24/4/2008 3:58:39 PM
Because I am sick of all the people that do not know how to do this, when really they should all look up this site to find out.
Contents:
1. Basic formatting
2. Hyperlinking
3. [fancy] Quoting
4. Showing others.
If contents links do not work then ignore.
1. Basic Formatting
In this forum you can use basic HTML tags to format your text with bold, italics, underline, font-face, font-size, font-colour, or a combination of the above.
Bold
To do bold text all you need to do is wrap the text that you want to be bold in <b> and </b>. Like this:
<b>This is 'bold' text</b>
prints:
This is 'bold' text.
Italics
Like bold, all you need is the <i> and </i> tags to be around the italics text. Example:
<i>Italics text</i>
prints:
Italics text
Underline
Again, but instead of 'b' or 'i' you use a 'u'. <u> and </u>.
<u>Underlined</u>
prints:
Underlined
Font colour, size and face
The font tag (<font> & </font>) includes 'elements'. These are other attributes such as face, size and color (note: US spelling of color, not UK spelling of colour).
Example showing all font face, size color:
<font face="times" color="blue" size="6">Example of all font elements</font>
prints:
Example of all font elements
2. Hyperlinking
Doing links is easy. A hyperlink in HTML is known as an Anchor. I can use an anchor to link to parts of the same page (such as in the contents of this HowTo), or to another page/website.
Example:
<a href="http://www.example.com/">Example</a>
prints:
Example
Or, more importantly for some people, using target="_blank" to make it open in a new tab/window.
<a href="http://www.example.com/" target="_blank">Example</a>
prints:
Example
To link to the same page, you simply have two pieces. The link and the part we want to link to.
For this, I will use the top of the page:
<a name="top"></a> (I have not set this but SC has it inbuilt).
^ this prints nothing, but putting text between the open tag and close tag <a> and </a> will form an anchor to that specific piece of text.
Link:
<a href="#top">TOP OF PAGE</a>
TOP OF PAGE
Links can also be useful to display 'hidden' information, such as what I have done in the "some people" link above. I have a title (title="kimarhi") which when the mouse hovers over the link it displays "kimarhi" in a box.
3. [fancy] Quoting
Quoting can be as simple as copying and pasting the post and wrapping it in italics tag, or as elaborate as using a blockquote, span and many other tags.
Simple Quote:
BiggzBlues [SmileCity Gold Member]
24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin
prints:
BiggzBlues [SmileCity Gold Member]
24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin
Fancy Quote:
<blockquote style="border-left: solid 3px #CCCCCC;padding-left:5px;"><small><small><b>Quote: BiggzBlues [SmileCity Gold Member]</b> - <i> 24/4/2008 1:04:14 PM</i></small></small><hr width="100%" /><small><i>
Oh no.....the toaster is toast... Toothy grin </i></small><blockquote>
This prints:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
--------------------------------------------------------------------------------
Oh no.....the toaster is toast... Toothy grin
Because that is a bit to remember, here is a template to copy+paste:
<blockquote style="border-left: solid 3px #CCCCCC;padding-left:5px;"><small><small><b>Quote: USERNAME</b> - <i>DATE AND TIME</i></small></small><hr width="100%" /><small><i>
QUOTED POST</i></small><blockquote>
4. Showing Others
Showing others the HTML and helping others to learn is easy as. All you need to know is how to stop the html tags being parsed and to display the html instead of use the html. This is as simple as using the html to display a < and a >, and if you want to know how to do that, you need to know the & as well.
& - &
< - <
> - >
Example using the hyperlinks:
<a href="http://www.example.com/">Example</a>
prints:
<a href="http://www.example.com/">Example</a>
End.
Remember to test any HTML in controversial threads. These do not get bumped up to the top of Recent Topics page and so will not flood the forum. Here is an ideal one:
HTML Testing Playground
frup
24/4/2008 4:08:17 PM
Quote: frup [SmileCity Gold Member] - 24/4/2008 3:58:39
--------------------------------------------------------------------------------
Quote Example 2: Multiple Quotes:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
--------------------------------------------------------------------------------
Oh no.....the toaster is toast... Toothy grin Toothy grin
frup
24/4/2008 4:09:31 PM
Quote: frup [SmileCity Gold Member] - 24/4/2008 4:08:17
--------------------------------------------------------------------------------
Quote Example 2: Multiple Quotes:
Quote: frup [SmileCity Gold Member] - 24/4/2008 3:58:39
Quote Example 2: Multiple Quotes:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin Toothy grin Toothy grin
frup
24/4/2008 4:13:39 PM
Quote-of-a-quote-... quotes are not ideal in this case, as copying the text will look like the second one above. Adding the HTML is tedious to make it look like the first one above.
12345678
24/4/2008 4:40:05 PM
wow u really know your stuff.
THANK YOU
Kernewek
24/4/2008 4:52:59 PM
can you say it in english please
12345678
24/4/2008 5:06:37 PM
ok.
chingchingchong wanghongak meet meet hii huu haa buga buga koo kko mee u haha u lala madamada hinjaat walawala akuaku
english enough kernewek
12345678
24/4/2008 5:07:44 PM
omg SORRY if u werent getting smart to me shame......
Kevymtnz
24/4/2008 5:38:17 PM
frup
24/4/2008 6:54:59 PM
While I would really love to take credit for that rant, that was my younger brother master5o1 who typed that wonderful tutorial. I must have forgot to log out while using his computer.
One thing he missed is images.
<img src="http://www.site.com/image.jpg"> will allow you to add an image although sites like photobucket.com helpfully provide you with code to copy and paste.
bobchannz
27/4/2008 10:53:05 AM
Very useful!
HowTo: HTML on this forum ........Post a reply
frup
24/4/2008 3:58:39 PM
Because I am sick of all the people that do not know how to do this, when really they should all look up this site to find out.
Contents:
1. Basic formatting
2. Hyperlinking
3. [fancy] Quoting
4. Showing others.
If contents links do not work then ignore.
1. Basic Formatting
In this forum you can use basic HTML tags to format your text with bold, italics, underline, font-face, font-size, font-colour, or a combination of the above.
Bold
To do bold text all you need to do is wrap the text that you want to be bold in <b> and </b>. Like this:
<b>This is 'bold' text</b>
prints:
This is 'bold' text.
Italics
Like bold, all you need is the <i> and </i> tags to be around the italics text. Example:
<i>Italics text</i>
prints:
Italics text
Underline
Again, but instead of 'b' or 'i' you use a 'u'. <u> and </u>.
<u>Underlined</u>
prints:
Underlined
Font colour, size and face
The font tag (<font> & </font>) includes 'elements'. These are other attributes such as face, size and color (note: US spelling of color, not UK spelling of colour).
Example showing all font face, size color:
<font face="times" color="blue" size="6">Example of all font elements</font>
prints:
Example of all font elements
2. Hyperlinking
Doing links is easy. A hyperlink in HTML is known as an Anchor. I can use an anchor to link to parts of the same page (such as in the contents of this HowTo), or to another page/website.
Example:
<a href="http://www.example.com/">Example</a>
prints:
Example
Or, more importantly for some people, using target="_blank" to make it open in a new tab/window.
<a href="http://www.example.com/" target="_blank">Example</a>
prints:
Example
To link to the same page, you simply have two pieces. The link and the part we want to link to.
For this, I will use the top of the page:
<a name="top"></a> (I have not set this but SC has it inbuilt).
^ this prints nothing, but putting text between the open tag and close tag <a> and </a> will form an anchor to that specific piece of text.
Link:
<a href="#top">TOP OF PAGE</a>
TOP OF PAGE
Links can also be useful to display 'hidden' information, such as what I have done in the "some people" link above. I have a title (title="kimarhi") which when the mouse hovers over the link it displays "kimarhi" in a box.
3. [fancy] Quoting
Quoting can be as simple as copying and pasting the post and wrapping it in italics tag, or as elaborate as using a blockquote, span and many other tags.
Simple Quote:
BiggzBlues [SmileCity Gold Member]
24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin
prints:
BiggzBlues [SmileCity Gold Member]
24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin
Fancy Quote:
<blockquote style="border-left: solid 3px #CCCCCC;padding-left:5px;"><small><small><b>Quote: BiggzBlues [SmileCity Gold Member]</b> - <i> 24/4/2008 1:04:14 PM</i></small></small><hr width="100%" /><small><i>
Oh no.....the toaster is toast... Toothy grin </i></small><blockquote>
This prints:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
--------------------------------------------------------------------------------
Oh no.....the toaster is toast... Toothy grin
Because that is a bit to remember, here is a template to copy+paste:
<blockquote style="border-left: solid 3px #CCCCCC;padding-left:5px;"><small><small><b>Quote: USERNAME</b> - <i>DATE AND TIME</i></small></small><hr width="100%" /><small><i>
QUOTED POST</i></small><blockquote>
4. Showing Others
Showing others the HTML and helping others to learn is easy as. All you need to know is how to stop the html tags being parsed and to display the html instead of use the html. This is as simple as using the html to display a < and a >, and if you want to know how to do that, you need to know the & as well.
& - &
< - <
> - >
Example using the hyperlinks:
<a href="http://www.example.com/">Example</a>
prints:
<a href="http://www.example.com/">Example</a>
End.
Remember to test any HTML in controversial threads. These do not get bumped up to the top of Recent Topics page and so will not flood the forum. Here is an ideal one:
HTML Testing Playground
frup
24/4/2008 4:08:17 PM
Quote: frup [SmileCity Gold Member] - 24/4/2008 3:58:39
--------------------------------------------------------------------------------
Quote Example 2: Multiple Quotes:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
--------------------------------------------------------------------------------
Oh no.....the toaster is toast... Toothy grin Toothy grin
frup
24/4/2008 4:09:31 PM
Quote: frup [SmileCity Gold Member] - 24/4/2008 4:08:17
--------------------------------------------------------------------------------
Quote Example 2: Multiple Quotes:
Quote: frup [SmileCity Gold Member] - 24/4/2008 3:58:39
Quote Example 2: Multiple Quotes:
Quote: BiggzBlues [SmileCity Gold Member] - 24/4/2008 1:04:14 PM
Oh no.....the toaster is toast... Toothy grin Toothy grin Toothy grin
frup
24/4/2008 4:13:39 PM
Quote-of-a-quote-... quotes are not ideal in this case, as copying the text will look like the second one above. Adding the HTML is tedious to make it look like the first one above.
12345678
24/4/2008 4:40:05 PM
wow u really know your stuff.
THANK YOU
Kernewek
24/4/2008 4:52:59 PM
can you say it in english please
12345678
24/4/2008 5:06:37 PM
ok.
chingchingchong wanghongak meet meet hii huu haa buga buga koo kko mee u haha u lala madamada hinjaat walawala akuaku
english enough kernewek
12345678
24/4/2008 5:07:44 PM
omg SORRY if u werent getting smart to me shame......
Kevymtnz
24/4/2008 5:38:17 PM
frup
24/4/2008 6:54:59 PM
While I would really love to take credit for that rant, that was my younger brother master5o1 who typed that wonderful tutorial. I must have forgot to log out while using his computer.
One thing he missed is images.
<img src="http://www.site.com/image.jpg"> will allow you to add an image although sites like photobucket.com helpfully provide you with code to copy and paste.
bobchannz
27/4/2008 10:53:05 AM
Very useful!
