If you have a Music account with MP3 files stored somewhere ....then add some sound

HTML Text Formatting Tags

If you want to learn a bit more about HTML tags/elements then check out http://www.w3schools.com/html/default.asp
But please note that you can’t use “all” the tags available in the update form for your entry., just the decorative types of tags.

Balancing your boxes.
If your section contains boxes, side by side, then if you put 2000 characters in box 1 and only put 1000 characters in box 2 then they will  not match in length….  so you can play about with adding HTML tags to make the text bigger or bolder in box 2 so the 2 boxes match in size or just add a few <br> Or .<p> tags on the end(See example)

HTML TAGS (Just a few of the more useful ones.)

The <a> Tag.

<a>= allows you to put a clickable link to an external web address into your text </a>

This one takes you to the BBC website.
<a href="http://www.bbc.co.uk/" target="_blank"> The BBC </a>

This give you :- THE BBC

The BBC bit is actually the LINK TEXT , it can be anything you like. Don’t forget to close it on the end with an </a>
In the actual update form that you update in io-io.co it would look something like this:-

BBC News section.<br>Today io-io.co launches it’s Community Groups Section for community groups in the UK read more at <a href="http://www.bbc.co.uk/" target="_blank">The BBC </a>

will give you:-

BBC News section.
Today io-io.co launches it’s community groups section for community groups in the UK read more at The BBC

The same thing a text link that is 'not' underlined

<a href="http://www.bbc.co.uk/news/" target="_blank" style="text-decoration:none;">The BBC</a>
Give you:-
The BBC

The first bit <a href=http://www.bbc.co.uk/news/ is the web address that the page is at.

The second bit target="_blank" gives the browser instruction on how to open the link when clicked, in this instance a blank page.

The third bit style="text-decoration:none;">tells the browser not to put an underline under the text

The fourth bit The BBC is the link text and can be anything you like.

The fifth bit </a> closes the instruction

 

Insert an Image from another website in your box:-
<img src="http://slogit.com/cards/thoth/gallery/images/0.jpg" alt="The FOOL" width="179" height="270">

will give you:- this graphic from slogit.com
W3Schools.com

FONTS

<strong> =  Bold  Used to define important text in bold

<br> = Defines a line break

<p> =  Defines a paragraph

<center> = Creates a block-level center-aligned text (with the American spelling)

<h1> to <h6> = Defines HTML headings

You can also use px (pixel) size like the following :-

<p style="font-family:arial;color:red;font-size:40px;">

This is BIG TEXT

The H Tag (You can’t have 2 different sizes on one line using the H tag <h1> is used to make BIG TEXT reducing in size to <h6> small text
<h1>Text</h1>  <h2>. Text </h2>  <h3> Text </h3>  <h4> Text </h4>  <h5> Text </h5>  <h6> Text </h6> used really to make headlines or paragraph headings.

If you want  slightly bigger text within a sentence use strong, px, or even percentage 100% ( 100% is the normal size on the users/visitors browser so if you specify 200% the font will be twice the size.

<strong>=This text is strong</strong>

<small> = Makes the text smaller</small>

<li>= Defines a list item</li>

<ul>
<li>Apples</li>
<li>Pears</li>
<li>Bannanas</li>
<li>Oranges</li>
</ul>

Gives you:-

<hr> = A horizontal rule. (makes a Line across your entry)

<em>io-io.co</em> = Emphasis (conventionally displayed in italics)

<p style = "background-color:green;"> = change the background color of a box.

 

<style = "background-color:yellow;"> Give a colour background to the selected text.

With this one you can put a boarder around your box:-

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> The content of the box.... .... .... ...... then the last thing to close it all off </div>

You can specify the font colour with the color attribute (note the American spelling), typeface with the face attribute(The font , and absolute or relative size with the size attribute.
Examples…..

<font> = formats and decorates the font used There are a few tags you can use together in this one
<font [color=colour] [size=size] [face=face]>This is the text</font>

<font color="green">text</font> =creates green text.

<font color="#114499">text</font> creates text with hexadecimal color #114499. (click on link to see codes for all the different colours, takes you to wikipedia)

<font size="4">text</font> creates text with size 4. Sizes are from 1 to 7. The standard size is 3, unless otherwise specified.
Or
<font size="+1">text</font> creates text with size 1 bigger than the standard. <font size="-1">text</font> is opposite and shrinks it.

Picking a different Font

<font face="Courier">text</font> makes text with Courier font.

SO

<p style="font-family:verdana;font-size:110%;color:gblue">
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.</p>
will give you:-
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.

Now a word about picking a font….. The font you select must be in the font collection on the users/viewers computer So if you pick a font not on the viewers/users computer it will default to the standard default font on his/her computer. So be careful with picking some whacky / gothic fonts not used by anyone else in the world.

<sub>text</sub> and <sup>text</sup>
Makes subscript or superscript text.  This is<sub> subscript</sub> and this is <sup>superscript</sup>

<ul> underlines a text item</ul>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>

SO would look like :-
This text is bold
This text is strong
This text is italic
This text is emphasized

This with <ul> tag would make an unordered list
<ul><b>This text is bold</b></ul>
<ul><strong>This text is strong</strong></ul>
<ul><i>This text is italic</i></ul>
<ul><em>This text is emphasized</em></ul>

SO would look like :- with bullet points

 

This is <font color="#2e8b57">155 characters</font> including the spaces. This is <font color="#ff00ff">155 characters</font> including the spaces. This is <font color="#ffff00">155 characters</font>

Will look like this:-
This is 155 characters including the spaces This is 155 characters including the spaces This is 155 characters

All Tags are in RED
<font size="6"><b>Samba</b></font> is a <i>Brazilian dance and musical genre</i> originating in Bahia, <u>Brazil</u>, and with its roots in <strong><font color="blue">Rio de Janeiro and Africa</font></strong> via the West African slave trade and African religious traditions. It is recognized around the world as a symbol of <font size="6"><font> color="blue">Brazil and the Brazilian Carnival</font ></font>. Considered one of the most popular Brazilian cultural expressions, samba has become an icon of Brazilian national identity. The Bahian Samba de Roda <i><strong>(dance circle)</strong> </i>, is recognised by <a href="http://whc.unesco.org/en/list/">UNESCO</a> as culturally significance.

Gives you the following:-
Samba is a Brazilian dance and musical genre originating in Bahia, Brazil, and with its roots in Rio de Janeiro and Africa via the West African slave trade and African religious traditions. It is recognized around the world as a symbol of Brazil and the Brazilian Carnival. Considered one of the most popular Brazilian cultural expressions, samba has become an icon of Brazilian national identity. The Bahian Samba de Roda (dance circle), is recognised by  UNESCO as culturally significant.

So remember when you start using a tag <font>you must close it with the corresponding close tag  </font> and if you have used three different tags to make an effect you must close them </font></font></font> otherwise the rest of the text will take on the effects of the unclosed tags.

BUT remember..... in my book...... less is more, so don't-over-do- it with your styling

and Remember

If you want to learn a bit more about HTML tags/elements then check out http://www.w3schools.com/html/default.asp
But please note that you can’t use “all” the tags available in the update form for your entry., just the decorative types of tags.