Search
Username:
Password:
Register or Reset Password
Remove the ads!
A Guide to HTML on FPSB
Difficulty: Intermediate
Category: FPSB > Other/MiscAuthor(s): Aceman

The Ulitimate FPSB Html Guide
Table of Contents Skippers Complete!
This is the ultimate guide for using html on fpsb. Html is very helpful and handy on this site. You can use it to make cool text efects, hyperlinks, and even post images. But you can even link your images. How cool is that. I this tutorial I will try to explain the very importances.
Their are amny many different ways to customize your text, I may not cover all of them but will include the must used ones.

This:
<b>bold</b>
<i>italic</i>
<s>strikethrough</s>
<u>underlined</u>
<blink>blink</blink>
<marquee>marquee</marquee>


Gives you...
bold
italic
strikethrough
underlined
blink
marquee
Their are various amount of colors you can use on this site. I will first explain to you about fpsb's class colors.

This:
<b class=red>class red</b><br>
<b class="blue">class blue</b><br>
<b class="green">class green</b><br>
<b class="orange">class orange</b>

Gives you..
class red
class blue
class green
class orange

The colors above also correspond to the uberstyle or your uberstyle. For an example.
A persons uber style has been set to different class colors regarding his uberstyle they made. You should see something like this:

.red { color:#FF4E4E }
.green { color:#6EE16C }
.blue { color:#6CB1E1 }
.orange { color:#FF7238 }
.grey { color:#8D8D8D }

You can simply change those colors in your uberstyle any time you'd want to.
Now different font colors I will show an example below.
red
blue

<font color="red">red</font>
<font color="blue">blue</font>

and so on...
Another way is:
red
back

<font color="#FF0000">red</font>
<font color="#000000">back</font>

Scrollbar Small & Thin

HorizontalHorizontalHorizontalHorizontalHorizontal

The code:
<div style="overflow: auto; width: 100px; height: 30px;">HorizontalHorizontalHorizontalHorizontalHorizontal</div>


Scroll Bar Downward & Wider
ddddddddddddddddddddd
ddddddddddddddddddddd

ddddddddddddddddddddd
ddddddddddddddddddddd
ddddddddddddddddddddd

ddddddddddddddddddddd
ddddddddddddddddddddd
ddddddddddddddddddddd

ddddddddddddddddddddd
ddddddddddddddddddddd
ddddddddddddddddddddd

ddddddddddddddddddddd
ddddddddddddddddddddd
ddddddddddddddddddddd

ddddddddddddddddddddd
ddddddddddddddddddddd
ddddddddddddddddddddd


The code:
<div style="padding: 4px; overflow: auto; width: 175px; height: 150px; font-family: verdana; font-size: 10px; text-align: left;">ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>ddddddddddddddddddddd<br>
</div>

Using hyperlinks on fpsb is very helpful. But some other think of it as a waise of time because their quite lazy. Below I will show you some more examples on using hyperlinks on fpsb.
Link to another page.
fpsbanana.com
<a href="http://fpsbanana.com/">fpsbanana.com</a>
Link to another page in a new window/tab.
fpsbanana.com
<a href="http://fpsbanana.com/" target="_blank">fpsbanana.com</a>
Links within the site. (Thanks Swamp)
forum
<a href="/forum>
Displaying images on fpsb is pretty simple.
First you need the URL of the picture, you can simply find it by rightclicking the image and click copy image location using firefox. Using IE simply rightclick > properties. Then place the url between the quotes as I showed below. Here are some more examples.
Displaying Images:

<img src="http://image.hazardstrip.com/av/134032.png">
<img src="http://image.hazardstrip.com/av/142403.jpg">
<img src="http://image.hazardstrip.com/av/176521.gif">
<img src="http://image.hazardstrip.com/av/142413.gif">

A fieldset is a box Ill show you below.
This is a fieldset, it is a box, people use these a lot when writing tutorials.

<fieldset></fieldset>

This is a Legend, lets just call it a title for now.People use the legends for titles and inside the fieldset for information.

<fieldset><legend>This is a Legend, lets just call it a title for now.</legend>People use the legends for titles and inside the fieldset for information.</fieldset>
We all know what text size is, here I will show you how to increase the size of your text, or decrease it.
This:
<font size="6">Big</font>
<font size="2">Small</font>
<small>Smaller</small>
<small><small>Smallest</small></small>
Gives you..
Big
Small
Smaller
Smallest
Columns in fpsb are also very useful when using bullet points, for submitting news or anything.
  • The <ul> Indents for buelltet points.
    • Another <ul> makes it smaller and further to the right.
        The <ul> Indents for buelltet points.
        • Another <ul> makes it smaller and MORE further to the right.


    <ul><li> The &lt;ul&gt; Indents for buelltet points.<ul><li>Another &lt;ul&gt; makes it smaller and further to the right.<ul></il>The &lt;ul&gt; Indents for buelltet points.<ul><li>Another &lt;ul&gt; makes it smaller and MORE further to the right.</ul></ul></ul>
A subscript or superscript is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it.
Example:
This is subscript
This is superscript
<sub class="orange">subscript</sub>
<sup class="orange">superscript</sup>
Fpsb buttons are usually what you see when you submit something.
<input class="button" "type="submit" value="Button">

Thats a big button to make it smaller:


<input class="button" "type="submit" value="Button" style="font-size: 11px">

Now how to link a button:


<a href="/forum"><input class="button" "type="submit" value="Button" style="font-size: 11px"></a>
I will also show you some other techniques with HTML, for example combining an image with a link. It is pretty simple.
Combining Images With Links
Its really simple to do, just create a hyperlink but dont close the tags. </a> Then simply add in the image code.
<a href="http://www.fpsbanana.com/members/41348"><img src="http://image.hazardstrip.com/av/41348.gif"></a>

Using Titles
Titles is another cool way to give the image a name or brief text about the image, link, etc. It is most comonly used for images.
<a title="Xero"><img src="http://image.hazardstrip.com/av/39993.png"></a>

<img src="http://image.hazardstrip.com/av/38995.gif" title="Gez">


Showing Your Code in a tutorial.
In order to show your code in a tutorial you need a html entities converter, I have pretty much memorized most of the entities.
HTML Entities Converter
Here I will show you how to make the cool click effect call "skippers" (i guess), it will allow you to skip to a certain part of the tutorial.
First you need to name the text you want to skip to, this is how I did it in this tutorial:

<a name="test">Text to skip to</a>
Text to skip to<a href="test#">click to skip</a>
click to skip
Here I will answer your frequently asked questions.
Q: Is it possible to make a Hyperlinked + Titled Image? I only manage to use one of them at a time.
Your answer to that is to just add them in.
Example:

<a title="Fpsbanana" href="http://www.fpsbanana.com/"><img src="http://image.hazardstrip.com/site/fps_title.png"></a>
Me for the tutorial.
Rekon for the screenshot/render.

Added: 7 months agoTags: complete, guide, to, html, help, fpsb, links, contents, hyper, images, boobs
Feedback (64)
Page of 7   1 2 3 4 ... 5 6 7 Next Page
chell .
watch for watch? :)Y2M
Posted 18 hours ago
Pros: thank you very much.i finnaly know HTML
9К58 .
"put a lipstik on teh pig, its a pig!"Y2M
Posted 4 days ago
There is something missing here...
how to align words? like in the middle or on the right side
djnoreg .
I'm hybrid and i'm proud of it:DY2M
Posted 7 days ago
FPSBANANA
FPSBANANA
N51 .
Souless OrderY2M
Posted 8 days ago
Thank you for posting this.
sp!tfire.0xe .
Going to Portugal -> back 21.10.Y2M
Posted 19 days ago
Pros: Clear, infomative. Everything what you should know about html needed here in FPSB.
Cons: -
Improvements: -
Notes: Great job. :)
.
Y2M
Posted 20 days ago
Wow. I have never seen any submission formatted so beautifully in my life.
.
Thinkin outside the box. ;)Y2M
Posted 2 months ago
Posted by Dsdude

Any way to add scroll bars to prevent execise text from flooding pages? like on the sides of browsers?


Ah I forgot about that one, I add it in a bit. Thanks
.
Uberstyle is a WiP! xDY2M
Posted 2 months ago
Any way to add scroll bars to prevent execise text from flooding pages? like on the sides of browsers?
.
Screw wabbits, noobs are for me!Y2M
Posted 3 months ago
This was just epic. I was like 'lol i are no do this.' read this and learned some stuff, that I hope to take with me ;D
.
Making Ubers for 200 to 1000 pointsY2M
Posted 3 months ago
Yay! I wrote it without using the tut! Im learning!
Fpsbanana
Page of 7   1 2 3 4 ... 5 6 7 Next Page
Add Feedback
Feedback Instructions:
Helpful Feedback Would be nice.

You cannot post yet!
Get involved on FPSB by posting your thoughts. Give authors your feedback to help them develop.

To post in this submission register or login.
Assessment
The community's verdict.
User Rating [+]
10/10
bScore
10.0/10
You cannot assess yet!
Moderating FPSB is in your hands - when you assess a submission your vote determines its success or failure.

To vote on this submission register or login.
Stamps
This Tutorial in a nutshell...
Helpful & Handy
You cannot stamp yet!
Stamps let you apply characteristics to submissions to help others understand them.

To stamp this submission register or login.

Added by...
.
Thinkin outside the box. ;)
Ripe Member and Supervisor of Syn, H2V and CS2D
Not ranked

[+] Donate
Vote for Submitter
Like this tut? Vote . for one or more monthly awards.
You must login or register to access this!
Related Tutorials