This site hosted by Free.ProHosting.com
Google


Expanding Head
   html tips and tags
Tips and Tags


    A collection of tips, tags, and examples for reference and refreshing the memory. A good general reference for html tags is Webmonkey


  • Instant Message
  • Back Button
  • Misc tags
  • Body tags
    		•



    Clocks




    The code for the clock above is: <clock>
    Only for WebTV
      Clock attributes
    • dayofweek:
    • allcaps:
    • abbreviated:
    • day:
    • month:
    • year:
    • time:
    • time ampm:
    • time military:
    • time seconds:


    Using JavaScript the date can be shown

       Put this in the body of your document where you want the time and date to appear. The first dateString is raw and the second is toLocaleString.

    <SCRIPT TYPE="text/javascript">
    <!--
    var today = new Date();
    document.write('<font color="#00CCCC"><b>'+today+'<br>'); document.write(''+today.toLocaleString()+'</b></font><br>');
    // -->
    </script>

       You can also use the status bar or textfield to display the date and time with JavaScript and updated it each second.
    <SCRIPT TYPE="text/javascript">
    <!--
    function Tm() {
    today = new Date;
    // window.status='It\'s Now: '+today;
    document.clock.face.value=today;
    setTimeout('Tm();', 1000);
    }
    Tm();
    // -->
    </SCRIPT>

    <form name="clock">
    <input type="text" size="30" name="face" value="" readonly noSelect nohighlight>
    </form>



    Marquees

    ..this is your basic marquee with white font color...

    
<font color="white"><b>
<marquee>
..this is your basic marquee with white font color...</marquee>
</b></font>


    Marquee attributes
    direction
    left
    right - default
    behaivor
    alternate
    slide
    scroll - default
    scrollamount
    measured in pixels, default is 3
    scrolldelay
    measured in milliseconds, default is 16
    loop
    number of times the marquee will loop
    transparency
    50% is optimum for webtv
    vspace
    measured in pixels, reserves the same number of pixes for the top and bottom margins - defaul is 0
    hspace
    measured in pixels, reserves the same # of pixels for the left and right margins - default is 0
    align
    bottom
    center
    left - default
    right
    top
    height
    determines the height of the marquee
    in pixels or percentages
    width
    determines the width of the marquee
    in pixels or percentages
    bgColor
    determines the background color of the marquee - default is the body bgColor

    This is a little more ivolved

    You Can Do This
    THIS IS THREE MARQUEES INSIDE A TABLE
    hello


    And this is the code

    
<center>
<table bgcolor="blue" width="230" border="5">
 <tr>
  <td bgcolor="steelblue" gradcolor="white">
<font size="-1" effect="emboss" color="navajowhite"><b>
<marquee direction="right" scrollamount="10">
You Can Do This</marquee></b></font><br>
<font size="+1" color="red" effect="relief">
<i><b><marquee scrollamount="10">THIS IS THREE MARQUEES INSIDE A TABLE</marquee></b></i></font><br>
<font size="-1" effect="emboss" color="gold"><b>
<marquee behavior="alternate" direction="left" scrollamount="10">hello</marquee></b></font>
 </tr>
   </td>
     </table></center>




    Audioscopes
    WebTV Only



    The Tag Is


    <audioscope>
      Audioscope tags
    • leftoffset : distance from center.
    • rightoffset : distance from center.
    • leftcolor : color of left channel.
    • rightcolor : color of right channel.
    • gain : 0 will display a digital type, numbers can be positive or negitive.
    • maxlevel="true" : displays the peak gain level of the channel.
    • width : controls the width of the scope.
    • height : controls the height of the scope

    a little more involved



    and the code is

    
<center>
<table bgcolor="navyblue" border="4">
 <tr>
  <td align="center">
<audioscope bgcolor="black" height="60" width="300" rightoffset="8" leftoffset="-8" rightcolor="red" leftcolor="yellow" gain="3" maxlevel="true">
 </tr>
  </td>
   </table></center>




    Links
    <a href="URL"></a> Creates a hyperlink
    <a href="mailto:EMAIL"></a> Creates a mailto link
    To target a location within a document
      <a name="NAME"></a>
    and to link to the target location from another location in the document
      <a href="#NAME"></a>


    This is a url submission Textfield



    The code is:

    
<form name="myform" onSubmit="location.href=document.myform.mytext.value">
<input type="text" name="mytext" size="50" maxlength="300" onChange="location.href=document.myform.mytext.value">
<input type="button" value="Go" onClick="location.href=document.myform.mytext.value"></form>


    Linking with a button



    The code is :

    
<form name="goto">
<input type="button" name="action" value="Home" onClick="window.location.href='index.html'">
</form>


    Mouseovers

    You can use mouseovers to display link data in the status bar with text or a button.

    Click Here

    And the code is :

    
<a href="sound/data.wav" onmouseover="window.status='A short audio clip'; return true" onmouseout="window.status=''; return true">Click Here</a>


    And for a button onFocus and onBlur are used :
    WebTV Only



    And the code is :

    
<form>
<input type="button" value="Click Here" onFocus="window.status='Click here for a short audio clip'; return true" onBlur="window.status=''; return true" onClick="window.location.href='sound/data.wav'">
</form>




    Here is an example of a direct e-mailer


    Enter Message


     



    and the code is

    
<center>
<font color="lightblue"><b>Enter Message</b></font><br>
<form action="mailto:your_name@webtv.net?no_signature=true" enctype="text/plain" method="post">
<font color="navajowhite">
<input type="text" name="message" cursor="yellow" usestyle borderimage="file://rom/borders/buttonborder2.bif">
</font><br><br>
<font color="lightblue">
<input type="submit" value="SEND" usestyle borderimage="file://rom/borders/buttonborder2.bif">
</font>&nbsp;<font color="lightblue">
<input type="reset" value="CLEAR" usestyle borderimage="file://rom/borders/buttonborder2.bif">
</font></form></center>


    And this style
    tvimages for Plus Only

    Enter Message




     


    and the code is:

    
<font color="silver">
<b>Enter Message</b></font><br><br>
<form action="mailto:your_name@webtv.net?no_signature=true" enctype="text/plain" method="post">
<font color="navajowhite">
<textarea name="Message" rows="5" cols="20" bgcolor="#111111" growable usestyle borderimage="file://rom/tvimages/TVbuttonborder.bif" cursor="yellow" autoactivate nohighlight>
</textarea></font><br><br><br><font color="silver">
<input type="submit" value="SEND" usestyle borderimage="file://rom/borders/buttonborder7.bif">
&nbsp;<input type="reset" value="CLEAR" usestyle borderimage="file://rom/borders/buttonborder7.bif"></font></form>


    and this email button for those small places



    go here for the code



    Misc. tags
      Textfield/area attributes
    • nohighlight - hides cursor outline around fields.
    • autoactivate - automatically activates the cursor in a field.
    • nobackground - make form fields transparent.
    • borderimage="null" nobackground - allows bgColor and gradColor tags to show through a field.
    • noSelect - keep cursor from finding a field.
    • readOnly - disallows changing or adding to a form entry.
    • onFocus="this(blur)" - disallows changing a form entry.


    Body Tags and Tricks

    logo: When used in the body tag it adds an image to the page discription for bookmarks. Webtv users can see the image with the "Info" key and while viewing "Recents". It is also seen in saved Faviorites. An image of 60 pixels is recommended. Animated gifs will work too.

    address: When used in the body tag it allows you to control the title of the page as it will appear in a bookmark and the info panel.
    example: <body logo="url_Of_Iage" address="Title/Info">

    xspeed="n" yspeed="n": Where n can be positive or negative. Small numbers are best to avoid jerky movement. An example can be seen here using xspeed="-1" yspeed="1" in the body tag.
    example: <body bgColor="black" background="URL_of_Image" xspeed="-1" yspeed="1">

    Transition:
    With this body tag attribute, you can control how the page loads visually.

      For Webtv
    • wipedown
    • wipeup
    • wipeleft
    • wiperight
    • slidedown
    • slideup
    • slideleft
    • slideright
    • pushdown
    • pushup
    • pushleft
    • pushright
    • blackfade
    • spinoutin
      • example: <body transition="wiperight">
      Scrolling Page:
      window.scrollBy(x,y)
         This script will scroll a page with a distance set in pixels (x,y) and a time set in mili-seconds.
      Try it here

      
<SCRIPT LANGUAGE="JavaScript">
function myScroll() {
    window.scrollBy(0,5) // distance in pixels
   setTimeout('myScroll()',50); } // 50 mili-seconds
if (document.layers || document.all)
    myScroll()
</SCRIPT>

      novtilebg nohtilebg bgproperties=fixed
         This set of tags will fix a background, allowing no scrolling. Using these body tags along with the scoll script will scroll the foreground on the fixed backgound image. View an example here
      <BODY text="" link="" vlink="" alink="" bgcolor="black" background="url_of_image" novtilebg nohtilebg bgproperties="fixed">





    the code for the back button above is:

    
<form name="back"><input type="button" value="BACK" onClick="history.go(-1)"></form>


    Expanding



    [ Home | Scripts | Editor | Programming | Resources ]

    contact