4 posts 12/20/2008 4:59 pm
|
Mail, blog, post design: more about HTML (How to use FriendFinder design possibilites)
Hello all, here are some exemples and more explanation about HTML uses in FriendFinder websites ( FriendFinder restrict HTML to specific HTML codes ( with some little difference than real HTML ) wich they use "[" and "]" to identify them in the possible editing places on their websites. uses of "{" and "}" in here are for editing and showing purposes )
Basicly, mostly every HTML tags have a start point and an end point (with some exception) wich the effect will be within those points. A start point is the word itself within "[" and "]" on FriendFinder wich has it's end point with a "/" followed by the same word.
Exemples:
{b}this is in bold{/b} - this is not in bold
{i}{b}this italic and bold{/b} and this is only italic{/i}
Note of the order the tags are writen as a start point and an end point. Mostly everything is possible to put in between a start point and an end point. Just don't mix the orders from the start point and the end point:
Not good: {b}{i}text{/b}{/i}
Good: {b}{i}text{/i}{/b}
Each start point has to have it's end point (other than the few exceptions). Putting only 1 end point to multiple start points will result to only have the end point put with the first start point before it related to it by orders.
Not good: {color #FF0000}red text{color #FFFF00}yellow text{/color}
Good: {color #FF0000}red text{color #FFFF00}yellow text{/color}{/color}
Upper case or lower case is not important. You can put capital letters or not it won't make a difference other than for you to better visualise your tags while editing your text.
|
Tables are there to organise the visualisation of the text. It doesn't mean that if a table is there that we will visualy see a border, a bakground color with it. It can be there only to regoup text or images.
In FriendFinder, 3 tags with options are used to define tables wich are the same as in HTML with the difference that they put "[" and "]" instead of -smaller than- and -greater than-:| {table} | to specify where a table starts and end | | {tr} | to specify we start a new row in the table | | {td} | to specify we start a new column in the table |
Source:
{table bgcolor=#B0B000 cellpadding=4 cellspacing=1}{tr}{td}{table}{/td}{td}to specify where a table starts and end{/td}{/tr}{tr}{td}{tr}{/td}{td}to specify we start a new row in the table{/td}{/tr}{tr}{td}{td}{/td}{td}to specify we start a new column in the table{/td}{/tr}{/table}
Text and all information should be put within the {td} and {/td} tags wich if not, it might result in the browser o crate a table region wich migth not be what you want. If you crete a table, you have to put the {tr} and {td} tags to creat at least 1 region in the table.
Options:| border= | specify the border width as a number, 0 beeing none | | width= | specify the width, wich can be a number to represent it by pixels, or a % ( ex.: 100% ). If not specify, it will adjust itselfs to what is around it | | height= | specify the height, wich can be a number to represnt it by pixels, or a % ( ex.:98% ) | | cellspacing= | to represent the space in between each region in a table | | cellpadding= | to represent the space in between the edges of the regions and the inner text, objects in a table | | bgcolor= | Specify what is the background color in the objects within a part of the table as a region. | | align= | to specify wht type of alignment will the content be on the horizontal display within a region. Possible values:left, center, right (by default, it's left when that option is not specify) | | valign= | certical alignment of a region within a table. Pssoble values:top, center, bottom | | colspan= | specify that the region in use will get that amount of columns within the {td} tag. IF you get it to be part of mixing up with another region wih you spcified rowspan including part of one to the other, the first one the broswer saw will take the region spcified | | rowspan= | nearly the same as about colspan, but for rows within the {td} tag |
Exemple 1:| Some text | second column, first row | | second column, second row |
Source:
{table bgcolor=#FFFF80 cellspacing=1 cellpadding=10}{tr}{td rowspan=2 bgcolor=#808000}Some text{/td}{td}second column, first row{/td}{/tr}{tr rowspan=2}{td bgcolor=#606000}second column, second row{/td}{/tr}{/table}
Explanations:| Light yellow border | I specified a background color in the table tag of a light yello (#FFFF80) wich is taken effect in all the table, but wich background colors in the {td} tags overwrite the background color. As I specified a cellspacing=2, this space is still part of the table, but not of the {td} and {tr} regions parts. Wich we seem to see a border, but in fact, is a cellspacing and a backgroudn color with regions within the {td} and/or {tr} havign options of bgcolor | | text color, font, bold, etc. is not ok | each region in a table is independent of text specification outside the table wich the light colors I use outside the tables are not puting the color in the tables. You should put a {color} taqg within the region to specify a color, or any other text visualisation modification you woudl want | | different background colors | if no bgcolors are specified, the background will take the background color of it's related tag. in the exemple 1, we can see that there is a {td} with no bgcolor specification wich the browser looked in it s related {tr} tag. No bgcolor there too, wich the browser checked the information in the {table} tag wich it foudn a bgcolor option. if not, the table would take the background of where it is placed, as in this table here where you are reading this, no bgcolor has been specified wich the table is having a kinf of transparency. | | small table or table wrong size | We didn't specify any width neither any height wich the table will take the parts around it (up, don, left, right) and will take the minum place needed. It will adjust automaticaly itself to the size of the images and text within it and/or within the table it would be in. You could specify a width=100% to make the table take the available width within where it is in the page |
Exemple 2:Source:
{table cellspacing=2 cellpadding=10 bgcolor=#FFFF80}{tr}{td bgcolor=#FFFF00}{table cellspacing=2 cellpadding=4}{tr}{td bgcolor=#808000}{photo happyDracco}{/td}{/tr}{/table}{/td}{/tr}{/table}
The exempple 2 is a simple way of seeing what we can do in putting a table withint a table. The most important thing when doing this, is that the new table as to be within the {td} part of the oither table. if not, it will result to something differtent wich is not recommended.
See the cellspacing with the bgcolor and cellpadding effects about the visualisation of the colors. We have thqt border effect with the colors we want.
You can create a table with multiple tables of regions of 1 of width, 1 of height, wich with it s abackground will let you see it as a computer picture. The problem, it's long to type it, to write it, for only a little picture kind of view.
|
Colors
There are few defined words that you can use as colors as "red", "blue", etc. There is a list wich you can easily access in here in FriendFinder. If you want a more precise color, you can use the "hex" ( as hexadecimal, 0-9 followed with A-Z; 0,1,2...8,9,A,B..E,F,10,11,12...18,19,1A,1B, ..1E,1F,20... ) way to write them wich has to be 7 digits:
#rrggbb ( red,green,blue )
where rr=00 to FF, gg=00 to FF, blue=00 to FF
00 is none of that color to a bright seeing of that color
the mix of those 3 in equivalent colors (ex.: #808080) will get you a grey, wich from 000000 to FFFFFF you can have 256 scales.
basic simple colors:
#FFFF00 -- yellow
#FF00FF -- purple
#00FFFF -- cyan (blue-green)
( hey, this line is a table! )
tags alone (whitout an end point):
{br} -- causes the text to beon a new line after it (line break)
{bling number} -- specific to FrindFinder, puts a bling
{photo name} -- specific to FriendFinder, puts a small photo
{blog id] -- specific to FriendFinder, puts a blog link
{member name} -- specific to FriendFinder, puts a member page link
|
Enjoy!
Phil
|
|
Meet your Special Someone
