Welcome to
The Magic Box
HTML tips page

Contents

Clicking on the content headings will take you to the relevant part of the page or you can scroll down.
Put your speakers on to hear some music!!
Background images courtesy of the wonderful Wytchi of  WitchGraphic?

Please send any request regarding HTML TIPS to:- Dark_Magician


  • Basic formating codes
    		•
  • Colored text and spoiler font
    		•
  • Images, GIFs and avitars
    		•
  • Hyperlinks
    		•
  • Marquees
    		•
  • Wobbly Hugs
    		•
  • Bouncy Hugs
    		•
  • Go to The Magic Box (this opens in a new window)
    		•


    New Stuff!!!




    Basic formating codes
    Big  <big>Your Text Here</big>  e.g.  I'm normal <big>I'm big</big>  gives you  I'm normal I'm big

    Small  <small>Your Text Here</small>  e.g.  I'm normal <small>I'm small</small>  gives you  I'm normal I'm small

    Bold  <b>Your Text Here</b>  e.g.  <b>I'm in bold</b>  gives you  I'm in bold

    Italics  <i>Your Text Here</i>  e.g.  <i>I'm in italics</i>  gives you  I'm in italics

    Underline  <u>Your Text Here</u>  e.g.  <u>I'm underlined</u>  gives you  I'm underlined

    Superscript  <sup>Your Text Here</sup>  e.g.  I'm in <sup>superscript</sup>  gives you  I'm in superscript

    Subscript  <sub>Your Text Here</sub>  e.g.  I'm in <sub>subscript</sub>  gives you  I'm in subscript

    Strike-through  <s>Your Text Here</s>  e.g.  I'm off my <s>head</s> food  gives you  I'm off my head food

    N.B. You can mix your codes e.g. <b><u>In Bold and underlined</u></b> gives you In Bold and underlined

    Back to Contents




    Colored text and spoiler font

     Colored text  <font color=color name or hex code>Your text here</font>
    e.g. <font color=red>Rack likes strawberries</font> gives you Rack likes strawberries

    Spoiler font  <font color="AAAAAA">Your spoiler text here</font>
    e.g. * <font color="AAAAAA">Highlight me to read me </font> * gives you  *Highlight me to read me*

    Back to Contents




    Images, GIFs and avitars (a.k.a. Pretty picture code)

     Images, GIFs and avitars  <img src=put your url here> </img>
    e.g.  <img src=http://buffyvs30.free.fr/gal-tara/mini/011.jpg></img> gives you 

    Back to Contents




    Hyperlinks

     Hyperlinks  <a href=put your url here> Name for your link </a>
    e.g. <a href=http://www.geocities.com/quillmistresses/home.html> quillmistresses stories</a> gives you
    quillmistresses stories

    Hyperlink with an image  You can use an image for you link rather than plain old text.
        <a href=put your url here><img src=put your url here></img></a>
    e.g.  <a href="http://www.darkshire.org/~jhkim/rpg/buffy/spells/byseason.html"><img src="/magicbox/tips_images/warlock.gif" ></img></a>  gives you
    Click on the warlock to go to a site listing all the spells used on Buffy the Vampire Slayer

    Hyperlink that opens a new window  Opening a link in a new window is useful if you don't want to leave the site that
        you're on whilst viewing the new site/page.
        By adding a target = "_blank" to your link this will open it up in a new window for you.
    e.g.  <a href="http://www.buffymusic.net/index.html" target="_blank"> Buffy music site </a> gives you
    Buffy music site

    Mailto link  This is a special link that when clicked on will open the users default email application with your email address
      already in the send to field. This is useful for "contact us" type links.
    e.g.  Contact us regarding HTML TIPS:- <a href="mailto:youre-mailaddress@domain.com">Mail me</a>   gives you
    Contact us regarding HTML TIPS:- Mail me

    Back to Contents




    Lists

     Ordered Lists List can be useful if you want to let people know your favourite shows, episodes, songs etc.
        Ordered lists are, as the name suggests, in order from lowest to highest. Ordered lists start with the <ol>tag, then each
        element in the list is encased in<li> </li> tags.
        The type attribute of the <ol> tag denotes the style that the ordering takes. Please see the possible values below:-

    Type Value Generated Style Sample Sequence
    1 Aberic numerials (default) 1,2,3,4
    A Uppercase Letters A,B,C,D
    a Lowercase Letters a,b,c,d
    I Uppercase Roman Numerals I,II,III,IV
    i Lowercase Roman Numerals i,ii,iii,iv


        Here are some examples of ordered lists:-


    <ol type=I>
    <li> insert key into ignition </li>
    <li> turn key </li>
    <li> set "the gas" </li>
    <li> try not to crash into anything! </li>
    </ol>     		This gives you:

    1. insert key into ignition

    2. turn key

    3. set "the gas"

    4. try not to crash into anything!

    <ol type=a>
    <li> pack suitcases </li>
    <li> check plane tickets </li>
    <li> check passport </li>
    <li> don't forget teddy bear! </li>
    </ol>     		This gives you:

    1. pack suitcases

    2. check plane tickets

    3. check passport

    4. don't forget teddy bear!


    Unordered Lists these are "bulleted" lists, the contents listed at the top is an example of such a list.
       Unordered lists start with an <ul> tag. Each element in the list is encased in<li> </li> tags.
        The type attribute of the <ul> tag denotes the style that the "bullets" take. Please see the examples below:-


    <ul type=disc>
    <li> Hyperlinks </li>
    <li> Standard formating codes </li>
    </ul>     		This gives you:

    • Hyperlinks

    • Standard formating codes

    <ul type=circle>
    <li> Wobbly Hugs </li>
    <li> Bouncy Hugs </li>
    </ul>     		This gives you:

    • Wobbly Hugs

    • Bouncy Hugs


    <ul type=square>
    <li> Colored font </li>
    <li> Miscellaneous </li>
    </ul>     		This gives you:

    • Colored font

    • Miscellaneous


    Back to Contents




    Marquees

    Standard marquee

     <marquee>Your scrolling text here</marquee>
    e.g.  <marquee>I'm a standard marquee!!!</marquee>  gives you I'm a standard marquee!!!

    Legendary bouncing marquee!!

      <marquee behavior=alternate>Your bouncing scrolling text here</marquee>
    e.g. <marquee behavior=alternate>I'm a bouncing marquee!!!</marquee>  gives you I'm a bouncing marquee!!!

    Marquee with background color (standard or bouncing)

      <marquee behavior=alternate bgcolor=color name or hex code>Your bouncing scrolling text here</marquee>
    e.g.  <marquee behavior=alternate bgcolor=green>I'm a bouncing marquee with green background color!!!</marquee>  gives you I'm a bouncing marquee with green background color!!!

    Marquee with background color (standard or bouncing) and colored text

      Same as above but the text has a font around it.
    e.g. <marquee behavior=alternate bgcolor=green><font color=red>I'm bouncing green background color and red text!!!</font></marquee> gives you I'm bouncing green background color and red text!!!

    Back to Contents




    Wobbly Hugs (By special request. Be warned, they are NOT easy)

     Wobbly hugs were developed by a rather errant, erratic and somewhat bizarre warlock who dwells beneath the stairs of the Magic Box.
    All they are is the addition of the width attribute to the bouncing marquee to reduce the scrolling region so that it gives the appearance of the text wobbling. The idea is to reduce the scrolling region, given as a percentage in the width attribute, to be sufficient to allow the text to do a very short "bounce".
    It is the scrolling region of the post area that you have calculate the required percentage. Given here is a standard wobbly hug. If you increase the size of the text then you MUST increase the percentage to allow it to wobble. This is a very hit and miss
    procedure!!

    <marquee behavior=alternate width="20%"><b>{{{Wobbly Hugs}}}</b> </marquee>
    {{{Wobbly Hugs}}}
    The first recipient of  {{{Wobbly Hugs}}}  was tarasApprentice on 22nd January 2003, thankfully she still lives to tell the tale.

    Back to Contents




    Bouncy Hugs

     Bouncy hugs were also developed by The Magic Box's beneath the stairs dwelling warlock.
    They are very similar to the Wobbly Hug, in fact Bouncy Hugs are just the addition of the direction attribute to the code above for the Wobbly Hugs. Direction in this case is either up or down, it doesn't really make any difference
    when you have the behavior attribute as alternate. You can drop the behavior attribute and have it scroll up or down if you
    like or even change the behavior attribute to slide and see what happens!
    Given below is the code for the standard Bouncy Hugs. Have fun!

    <marquee behavior=alternate width="20%" direction=up><b>{{{Bouncy Hugs}}}</b> </marquee>

    The first use of  {{{bouncy Hugs}}}was on 20th February 2003.

    Back to Contents




    Miscellaneous

     h1 through h6 The <h1> to <h6> are usually used for headings. These decrease in text size from <h1>, the biggest, to <h6>,
        the smallest. Here are some examples:-
    <h1> Hi! I'm written in h1 </h1>   gives you

    Hi! I'm written in h1

    <h2> Hi! I'm written in h2 </h2>   gives you

    Hi! I'm written in h2

    <h3> Hi! I'm written in h3 </h3>   gives you

    Hi! I'm written in h3

    <h4> Hi! I'm written in h4 </h4>   gives you

    Hi! I'm written in h4

    <h5> Hi! I'm written in h5 </h5>   gives you
    Hi! I'm written in h5
    <h6> Hi! I'm written in h6 </h6>   gives you
    Hi! I'm written in h6


    Back to Contents






    Backgrounds supplied by Click to visit Witch Graphic?  Click Banner to vist their site.
    N.B. The Magic Box and NU-BRONZE are separate entities.