Draac.Com - Building A Better Internet


•  Page Layouts

•  Image Maps

•  Font Faces

QuickLinks - What Are These ? DraacMail Web Tools - Resources The Board Home - Draac.Com
Draac.Com's Html Extras
Some Extra Html Codes
To Enhance Your Web Pages
Updated 08/25/02
•  Quick Find - Transport Links
  • Form Buttons
  • IE Transitions
  • Favorite Icon
  • IE Fixed Background
  • Email Link Pre Filled
  • Border="0" Lesson
  • OE Html Signatures
  • Override Link Colors
  • Showing Html Codes
  • Open A New Window
  • Marquee Lesson
  • Wild IE Visual Filters
  • Textarea Box For Codes
  • Table Talk !
  • Indenting Text
  • Close Window
  • Back/Reload Button
  • Setting A BaseFont
  • IFRAMES For IE
  • Rolling Credits
  • Internal Link/Same Page
  • Internal Link/New Page
  • Meta Refresh
  • Font Faces
  • Image Maps
  • Spê¢ìäl Lêttèrs
  • Table Tricks
  • Easy CSS Tricks
  • No Margins
  • Comment Tags
  • Embeding A Video
  • Bust Out Of Frames
  • Frames - Targets
  • MSNTV Center
  • Colored <HR> Lines
  • Fieldset/Legend
  • Thumbnail Images
    • •  Form Buttons • Up Quick Find 
    Here is the code for a clickable button. It can be set to click to web pages, images, & sounds. The "value" is the text on the button.

    Note: If the "method" of "post" is not allowed on your server or with your browser , try method="post".

    Copy & Paste The Code:

    <form action="put url here" method="get">
    <input type="submit" value="Click Me">
    </form>

    Here is a sample button.

    Internet Explorer users, Click Here to add a bit of color to your form buttons.

    •  IE Transitions (IE4+ Only) • Up Quick Find 
    Internet Explorer users might have noticed the cool transitions comimg to this Html Extra's page. This code is very simple to do. Just place this meta code between the <head> & </head> tags.

    <META http-equiv="Page-Enter"
    content="revealTrans(Duration=#,Transition=#)">

    You will need to change two parts of this code. First, you will need to change the # after Duration to the number of seconds that you want the transition to take. Then, you will need to change the # after Transition to the number of the type of transition that you want.

    Click here for a list of the transitions and their corresponding number value.

    •  Favorite Icon (IE 5.0+) • Up Quick Find 
    This is an Internet Explorer 5.0+ code, it will not work with Netscape or MSNTV.

    Ever save a web page and see an icon displayed in your favorites ?

    This can be achieved by first creating a 16X16 icon, you can look for icon software at Download.Com. After you have created your icon, name it whatever you would like, just be sure to have the .ico extension. Then upload your icon to the same directory that the web page is in.

    The final step is to add the code below between the <head> and </head> tags of your html document.

    <link rel="shortcut icon" href="http://whatever.com/myicon.ico">

    This will also display an icon in the URL address bar once the web page has been saved in your favorites.

    For more on the favorite icon and an icon editor visit Favicon.Com

    •  Fixed Background (IE Only) • Up Quick Find 
    This small bit of code will "fix" a background so it remains still, while the contents of the web page scroll over the top if it.

    Click Here To See It In Action

    Here is the short code to add to your "body" line.

    bgproperties="fixed"

    Sample "body" line with the code in it.

    <BODY BACKGROUND="starb.gif" bgproperties="fixed" TEXT="#000000" LINK="violet" VLINK="violet" ALINK="#ff0000">

    •  Email With Subject/Message • Up Quick Find 
    Here is a cool code to send an email with the subject line and a message already filled in by you. Works with MSNTV or Computers !

    One application for this is a "Send This Page To A Friend" link on your web page.

    Check it out click on the link below.

    Send This Page To A Friend

    (don't be shy send this page while you test the link...:+)

    Here is the code, edit to your needs.

    <A HREF="mailto:?subject=PUT SUBJECT LINE HERE&body=PUT EMAIL MESSAGE HERE">Send This Page To A Friend</A>

    •  The Border="0" Lesson • Up Quick Find 
    A sometimes forgotten attribute. A simple way to create a much cleaner look to your web site. A must read for MSNTV users.

    Click Here For The Lesson

    •  Html Signatures For OE • Up Quick Find 
    If you are running Internet Explorer's Outlook Express 5 you can add graphics & sounds to outgoing emails. Spice up your Outlook Express 5 emails, it is a blast !

    Click Here For The Lesson

    •  Overriding The Link Colors • Up Quick Find 
    As you know the colors of your clickable links are determined by the colors you set in the <BODY> line of code.

    You can override these colors you set in the <BODY> line of code, by placing a font color between the anchors tags.

    Note: This will work in a MSNTV email as well.

    This Is A Purple Sample Link

    Here is the code I used to color the above link.

    <a href="http://www.draac.com/">
    <font color="#9400d3"><b>
    This Is A Purple Sample Link</b></font></a>

    •  Showing Your Html Codes • Up Quick Find 
    Sometimes there is a need to show some actual html coding on your web page. Perhaps to show the code to use to link to a banner on your site. Or maybe to show codes that you are teaching on your site very much like I do here at Draac.Com.

    In order to show the "greater than" > and "less than" < signs you must use a code to show them on your web page, or the code will be activated.

    Here are the codes for these signs: 

    
SIGN         CODES        DESCRIPTION

<            &lt;         Less than sign

>            &gt;         Greater than sign

    Note: Use lower case for these codes, not capital letters.
    These codes will work for MSNTV and/or computers.

    Here is a sample using these codes to show the "greater than" and "less than" signs on your web page without activating them.

    &lt;a href="URL here"&gt;
    &lt;img src="URL of image" height="?" width="?" border="0" alt="text here"&gt;
    &lt;/a&gt;

    The above code will be display as the code below on your web site, showing the "greater than" and "less than" signs.

    <a href="URL here">
    <img src="URL of image" height="?" width="?" border="0" alt="text here">
    </a>

    For More "Special Characters" Click Here

    Note to MSNTV users: Do Not Use <<>Tag Goes Here<>>
    to show your codes because it will not be right on a computer.

    •  Open New Window With A Link • Up Quick Find 
    Computer users, ever click on a link and it opens a whole new browser window for you ?

    This can be done simply with a "target" placed within the link itself.

    You can use this code with a frames page or on a regular html document. When used in a "frames" page, it will break the link free of the frames page.

    Here is the code to open a new window.

    <a href="URL of page" target="_blank">Click Here</a>

    Click Here To Try It

    You can also use Javascript to open a new window with a text link.

    Here is the Javascript code to open a new window.

    <a href="URL HERE" onclick="window.open(this.href);return false;">Click Here</a>

    •  Marquee Lesson • Up Quick Find 
    Want to get your text scrolling on your web page ? Use the marquee tag and set your text in motion. Marquees work with IE and MSNTV, not Netscape.

    Click Here For The Lesson

    •  Wild IE Visual Filters • Up Quick Find 
    The filters ONLY WORK WITH IE. They will not work with Netscape or MSNTV. Create wild looking text and images with the IE Filters. Brighten up your site, get wild..:+)

    Click Here For The Lesson

    •  Textarea Box For Codes • Up Quick Find 
    A nice way to show HTML codes on your web site is to place the HTML codes into a Textarea Box. This will show the HTML codes and make them easy to copy and paste.

    Here is the code to create a Textarea Box. I have added some HTML code within the box in my example code here to show you where it goes.

    <FORM>
    <TEXTAREA COLS="48" ROWS="3">
    <a href="http://www.draac.com/">
    <img src="http://www.draac.com/banner1.gif"></a>
    </TEXTAREA>
    </FORM>

    Here is the result of that code above.
    Adjust the COLS and ROWS to suit your needs.

    Internet Explorer users, Click Here to add a bit of color to your textarea boxes.
    •  Table Talk ! • Up Quick Find 
    Let's Talk Tables ! This section will have everything tables.
    From getting started to mini lessons on what tables can do.

    Click Here For The Table Talk

    •  Indenting Text • Up Quick Find 
    You can indent text by using a single spacer code, each one of these codes is equal to a hit on the spacebar. Here is the code &nbsp; and here is how to use it in a paragraph.

    &nbsp;&nbsp;&nbsp;&nbsp;This line of text will be indented.<br>
    The rest of your paragraph will go<br>
    on as usual, this is an easy way to<br>
    indent a single line in a paragraph.

    You can use the single spacer code any place that requires
    a little horizontal space. Perhaps between two images or
    between an image and some text. It's a handy code to have around.

    You can also indent text using CSS, visit Easy CSS Tricks.

    •  Close Window • Up Quick Find 
    So, you have created a new window and would like a button (or text link) to allow the viewer to close it. Below is the code to close a window with either a button or a text link.

    Close Window Button:

    <form>
    <input type="button" value="Close Window" onClick="self.close()">
    </form>

    Close Window Text Link:

    <a href="Javascript:self.close();">Close Window</a>

    •  Back/Reload Button • Up Quick Find 
    Add a button to your web page that will take the viewer back to the previous page. This code can be adjusted to go back more than one page, just change the (-1) to the number of pages you would like to go back to. To use this code to make a "forward" button remove the minus sign and just use a number value (1). To use this button as a "reload" button, just change the (-1) to the number (0).

    Go Back Button:

    <form>
    <input type="button" value="Go Back" onClick="history.go(-1)">
    </form>

    Go Back Text Link:

    <a href="Javascript:history.go(-1);">Go Back</a>

    •  Setting A BaseFont • Up Quick Find 
    If most your text on a web page is going to be the same size and/or have the same font face, then use this little code to set the default text size and/or font face. Place this code right after your <body> line of code and set whatever values you would like for your default text size and/or font face.

    <basefont size="2" face="verdana">

    All the text on your web page will be in that size and/or face unless you override this code by adding the size and face to some specific text on your web page.

    •  IFRAMES For IE • Up Quick Find 
    Learn how to use IFRAMES for your web pages. IFRAMES offer another way of adding content to your web pages. IFRAMES will not work with Netscape and are limited in the way they work with MSNTV.

    Click Here For The Lesson

    •  Rolling Credits • Up Quick Find 
    Build a web page that scrolls down on it's own. Mainly used for making a roll credits type page. Works with the latest versions of Internet Explorer, Netscape and MSNTV.

    Place this first piece of coding between the <HEAD> and </HEAD> tags of your Html document.

    <script>
    dif=10;inc=0;function scrollit(){inc=inc+10;parent.scroll(dif,inc);setTimeout("scrollit()",250);}
    </script>

    Then place onLoad="scrollit()" into your <body> line of code.

    Example of a <body> line of code with the "onLoad" included:

    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="scrollit()">

    •  Internal Link/Same Page • Up Quick Find 
    Create links within the same web page. Send your viewers to certain parts of your web page with a click of the mouse. This code is used here on this page, the "quick find links" at the top of this page are internal links and the "up to quick find" are other examples of internal links.

    Click Here For The Lesson

    • Internal Link/New Page • Up Quick Find 
    What this code allows you to do, is to link from one of your web pages to a specific location on another one of your web pages.

    Click Here For The Lesson

    •  Meta Refresh • Up Quick Find 
    Learn how transport the viewer to another web page without them clicking on anything. Great for splash pages, slide shows and can also be used to put two sounds on a single web page.

    Click Here For The Lesson

    •  Font Faces • Up Quick Find 
    Learn how to use different font faces on your web pages. A simple way to add to your web page designs. These will not work with MSNTV but MSNTV users can use them for the computer users that might visit your web site.

    Click Here For The Lesson

    •  Image Maps • Up Quick Find 
    Learn how to create images that are clickable on different "hot spots". A nice way to direct your viewers to different parts of your web site using a single image.

    Click Here For The Lesson

    •  Spê¢ìäl Lêttèrs • Up Quick Find 
    Would you like to learn how to create the © symbol or letters like ê ? This lesson will show you how to create these special letters for your web pages.

    Click Here For The Lesson

    •  Table Tricks • Up Quick Find 
    A few tricks to have up your sleeve when creating tables. It's those little things that can drive you crazy when your creating tables, learn about how to fix them for your tables designs.

    Click Here For The Table Tricks

    •  Easy CSS Tricks • Up Quick Find 
    This bag of CSS tricks will make the novice webmaster look like they design web sites for Microsoft©. Simple cut and paste CSS codes that will enhance your web sites and give them depth.

    Click Here For The Easy CSS Tricks

    •  No Margins • Up Quick Find 
     You can remove the margins on a web page with attributes placed in the <body> line of code. There are three different sets of attributes you that need to use to remove the margins for Internet Explorer, Netscape and MSNTV. If you are designing for one specific browser you only need to use the attributes for that one browser.
    • Internet Explorer - TOPMARGIN="0" LEFTMARGIN="0"
    • Netscape - MARGINHEIGHT="0" MARGINWIDTH="0"
    • MSNTV - HSPACE="0" VSPACE="0"

    If you combine all three browser attributes you will remove the margins on the web page for all three browsers. Here is a sample <body> line of code with all three "no margin" attributes included.

    <body TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" HSPACE="0" VSPACE="0" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

    Click Here To See A Test Page

    •  Comment Tags • Up Quick Find 
    You can add "comments" to your Html document that will not show up on your web page. These are useful in your Html coding to show you, the builder, where things start and stop, thus making it easier to find a specific section of your Html coding.

    There are two ways of adding comment tags to your Html documents.

    Here is one way of coding a comment tag.

    <COMMENT>Put Some Text Here</COMMENT>

    Here is another way of coding a comment tag.
    Make sure you leave a space before and after the text.

    <!-- Put Some Text Here -->

    •  Embeding A Video • Up Quick Find 
    You can display a video such as a .mpg, .avi or .asf video file right on your web page. This script will work with Internet Explorer or Netscape, it will not work with MSNTV.

    This script has been tested with .mpg, .avi and .asf video files and it works fine with any of them. It might work with other types of video files but I have not tested any others.

    Here is the script to be placed anywhere after the <body> tag but before the closing </body> tag. Just change the filename.mpg (both places) to the name of your video file and also adjust the width and height so your video looks looks best to you.

    <script language="javascript">
    if (navigator.appName.indexOf("Microsoft")>=0) {
    hTag='<img border="2" dynsrc="filename.mpg" start="fileopen" loop="infinite" width="300" height="200">'
    }else{
    hTag='<EMBED src="filename.mpg" autostart=true loop=true controller=false width="300" height="200">'
    }
    document.write (hTag)
    </script>

    Here is another way to embed a video, it too will work for Internet Explorer and Netscape but will not work with MSNTV. Customize the player options to suit your needs.

    <embed src="filename.mpg" autostart="false" controls="true" loop="false" width="200" height="200">
    </embed>

    •  Bust Out Of Frames • Up Quick Find 
    Want to avoid having your web page getting caught in someone else's frames page. Just copy and paste the script below and place it between the <HEAD> and </HEAD> tags of your Html document.

    The script will automatically break your web page out of the other person's frames page.

    <script LANGUAGE="JavaScript">
    <!--
    if (window != top)
    top.location.href = location.href;
    // -->
    </script>

    •  Frames - Targets • Up Quick Find 
    Having a problem with your links not opening correctly in a frames page that you have created ? Then here is a little lesson that might help explain how to correct this problem.

    Click Here For The Lesson

    •  MSNTV Center • Up Quick Find 
    Created for MSNTV users. A collection of codes and help using your MSNTV box to create web pages and email signatures.

    Click Here For This Section

    •  Colored <HR> Lines • Up Quick Find 
    new  This code works on Internet Explorer 4+, it will not work on Netscape 4.x or MSNTV. If you want to color your <HR> lines it is very easy to do. You can also add a "size" to these lines to determind the thickness of the lines. You can also determind the width, alignment and color (either in hex color number or the "name" of the color eg: red).

    Below is a sample of a colored <HR> line. The code to make this colored line is below the sample line.

    Here is the code for the red colored line above:

    <hr size="6" width="500" color="#ff0000" align="center">

    Click Here for a Hex Color Chart

    •  Fieldset/Legend • Up Quick Find 
    new  Make your forms look more professional and be more organized with the "fieldset" and "legend" tags.

    Click Here For The Lesson

    •  Thumbnail Images • Up Quick Find 
    new  Don't waste valuable web page space and costly bandwidth displaying those large images on your web sites. Use thumbnail images to create a more organized and fast loading web site.

    Click Here For The Lesson


    ValueWeb Banner
    Draac.Com Is Hosted By ValueWeb

    Register UK domain names at Domain Names UK


    | Advertise | Link To Us | Status/Updates | Privacy Statement |
    | Copyright © 1999-2003 Draac.Com © All Rights Reserved. |