Color Code<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font-size:20pt;line-height:25pt;">HTML font code is done using CSS.</p><p style="color:orange;">HTML font code is done using CSS.</p><p style="font-weight:bold;">HTML font code is done using CSS.</p><p>You can bold <span style="font-weight:bold">parts</span> of your text using the HTML 'span' tag.</p><p style="font-style:italic;">HTML font code is done using CSS.</p><p>You can make <span style="font-style:italic">some</span> of your text italic using the HTML 'span' tag.</p>

Text Color<p>Normal text color <span style="color:green">different text color</span> normal text color <span style="background-color:yellow">different background color</span></p>

BG Color<div style="background-color:yellow;border:1px solid black;padding:10px;"><p>HTML background code is limited, CSS background code is much better!</p></div><div style="background-image:url(/pix/smile.gif);

background-repeat:repeat;width:200px;height:200px;">

<p>HTML background code is limited, CSS background code is much better!</p></div><div style="background-image:url(/pix/smile.gif);

background-repeat:repeat;background-attachment:fixed;overflow:scroll;width:200px;height:100px;">

<p>HTML background code is limited, CSS background code is much better!example shows how a background image can be set to a fixed position- even though its containing block scrolls.</p></div><div style="background:url(/pix/smile.gif) repeat fixed;

overflow:scroll;width:200px;height:100px;">

<p>HTML background code is limited, CSS background code is much better!example shows how a background image can be set to a fixed position- even though its containing block scrolls.</p></div>Comment Box Colors<form action="/html/tags/html_form_tag_action.cfm" method="post">Comments:<br /> <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;">

Hey... say something! </textarea><br /> <input type="submit" value="Submit" /></form><form action="/html/tags/html_form_tag_action.cfm" method="post">Comments:<br /><textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;">Hey... say something!</textarea><br /><input type="submit" value="Submit" /></form><form action="/html/tags/html_form_tag_action.cfm" method="post">Comments:<br /> <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;"> Hey... say something! </textarea><br /> <input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" /></form><form action="/html/tags/html_form_tag_action.cfm" method="post">Comments:<br /> <textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;scrollbar-base-color:#638E0D;"> Hey... say something! (well, at least something that's long enough to make this comment box grow scrollbars...) </textarea><br /> <input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" /></form>Scroll Box Color<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

HTML Image Borders<img style="max-width:95%;border:3px solid black;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div><img style="max-width:95%;border:2px dotted #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div><img style="max-width:95%;border:6px groove #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px double #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px outset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px inset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px ridge #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px dashed #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:90%;border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

HTML Image Link Code<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank">

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" /></a><a href="http://www.travel-explorer.com/australia-best-beaches/" target="_blank"><img src="http://www.quackit.com/pix/byron_bay_225x169.jpg" border="0" style="border:none;max-width:100%;" alt="Photo of Byron Bay - one of Australia's best beaches!" /></a><a href="http://www.quackit.com/pix/worlds_largest_rabbit_2.jpg" target="_blank"><img src="http://www.quackit.com/pix/worlds_largest_rabbit_2_t.jpg" width="100" height="131" border="0" alt="Photo of a big bunny rabbit!" /></a><a href=""

name=""

hreflang=""

type=""

rel=""

rev=""

charset=""

shape=""

coords=""

target=""

accesskey=""

dir=""

class=""

id=""

lang=""

tabindex=""

title=""

style=""

onfocus=""

onblur=""

onclick=""

ondbclick=""

onmousedown=""

onmouseup=""

onmouseover=""

onmousemove=""

onmouseout=""

onkeypress=""

onkeydown=""

onkeyup="">Image goes here</a>

HTML Picture Codes

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /><img src="" width="" height="" border="" alt="" class="" id="" title="" style="" dir="" lang="" ismap="" usemap="" align="" hspace="" vspace="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

HTML Table<div style="width:200px;height:100px;border:6px inset orange;">

HTML border code - or should that read CSS border code?</div><div style="width:200px;height:100px;border:6px double orange;">HTML border code - or should that read CSS border code?</div><div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">Create borders for any HTML element.</div>

HTML Link<p>Example of a basic <a href="http://www.quackit.com/html/codes/html_link_code.cfm">HTML link</a>.</p>

HTML Link Code<a href="http://www.createawebsite.cc">Create a website</a><p>Check out this <a href="http://www.zappyhost.com/website_builder/" target="_blank">website builder</a>.</p><a href="mailto:homer@example.com">Send an email to Homer now!</a><h2>Link Targets<a name="link_targets"></a></h2><a href="http://www.quackit.com/html/tutorial/html_links.cfm#link_targets" target="_blank">Link Targets</a><a href="http://www.quackit.com/html/tutorial/html_links.cfm#link_targets" target="_blank">Link Targets</a>

HTML Open Link in New Window<a href="http://www.quackit.com/html/html_help.cfm" target="_blank">HTML Help</a>

HTML Email Link<a href="mailto:homer@example.com">Email Homer</a><a href="mailto:homer@example.com?subject=Doh!">Email Homer</a>

Scroll Box Codes<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.</div>

Colored Scroll<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

Scroll With Border<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:80px;width:150px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

Picture Scroll Box<div style="height:221px;width:150px;overflow:scroll;"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></div><div style="height:221px;width:150px;overflow:scroll;"><a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br /><a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a></div><div style="height:220px;width:150px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.</div>

Horizontal Scroll<div style="border:1px solid black;width:150px;height:100px;overflow-y:hidden;overflow-x:scroll;"><p style="width:250%;">By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow. </p></div>

Vertical Scroll<div style="border:1px solid black;width:150px;height:100px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;"><p style="height:250%;">By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow. </p></div>

Hide Scrollbar<textarea rows="10" cols="20" style="overflow:hidden;">Enter as much text as you can... until you'd expect a vertical scrollbar to appear. Go on! </textarea>

Marquee Codes<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee><marquee behavior="alternate">Your bouncing text goes here</marquee><marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee><marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee><marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile" /></marquee><marquee behavior="scroll" direction="left">

<img src="/pix/smile.gif" width="100" height="100" alt="smile" /><p>Sample text under a <a href="http://www.quackit.com/html/codes/html_marquee_code.cfm">Marquee image</a>.</p></marquee><marquee behavior="slide" direction="left">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="left">Your continuous scroll text goes here</marquee><marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee><marquee behavior="slide" direction="right">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="right">Your continuous scrolling text goes here</marquee><marquee behavior="alternate">Your bouncing text goes here</marquee><marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee><marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee><marquee behavior="scroll" direction="down">Your downward scroller text goes here</marquee><marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee><marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee><marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee><marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">Your continuous scroll text goes here</marquee>

Image Scrolling<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="slide" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="alternate"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><marquee behavior="alternate" scrollamount="30"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><marquee behavior="scroll" direction="up"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="down"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="10"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/big_fish_swimming_md_wht.gif" width="94" height="88" alt="Fish swimming from right to left" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Bat flying really fast" /></marquee><marquee behavior="scroll" direction="left" scrolldelay="800" scrollamount="100"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/71.gif" width="150" height="108" alt="Cup of tea anyone?" /></marquee>

HTML Stop Marquee<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Go on... click me (and hold the mouse down)!</marquee><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee><marquee behavior="scroll" direction="left" id="mymarquee"><p>Go on... press the button!</p></marquee><input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();"><input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();"><marquee behavior="scroll" direction="right" scrollamount="20" id="marquee1"><p>Marquee 1</p></marquee><marquee behavior="scroll" direction="left" scrollamount="20" id="marquee2">

<p>Marquee 2</p></marquee><input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee1').stop();"><input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee1').start();"><br /><input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee2').stop();"><input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee2').start();">

Slow Down & Speed Up Marquee<marquee behavior="scroll" direction="left" scrollamount="12" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 12, 0);">Go on... click me (and hold the mouse down)!</marquee><marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Go on... hover over me!</marquee><marquee behavior="scroll" direction="left" scrollamount="6" id="mymarquee"><p>Go on... press the button!</p></marquee><input type="button" value="Slower" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 1, 0);"><input type="button" value="Normal Speed" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 6, 0);"><input type="button" value="Faster" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 12, 0);">

Scrolling Marquee (JavaScript version)

HTML Close Window Code<a href="JavaScript:window.close()">Close</a>

HTML Open Link in New Window<a href="http://www.quackit.com/html/html_help.cfm" target="_blank">HTML Help</a>

HTML Scrollbars

Music/Video Codes<embed name="music_playlist"src="music_playlist.m3u"width="150"height="90"loop="false"autostart="false"></embed><embed name="music_playlist"src="music_playlist.m3u"width="300"height="90"loop="false"

<!-- Note: Make sure you place the xbMarquee.js file into the same directory that you run your code from. If you do place it into a different directory, make sure you update src="xbMarquee.js" to reflect the new location. Also, you only need to download xbMarquee.js once (regardless of how many scrolling marquees you have on your page).And thanks for visiting Quackit.com!--><script type="text/javascript" src="/javascript/codes/xbMarquee.js"></script><script type="text/javascript"><!-- //set the marquee parameters function init() { ltr_marquee.start(); } var ltr_marquee_Text = 'JavaScript scrolling text'; var ltr_marquee_Direction = 'right'; var ltr_marquee_Contents='<span style="font-family:Comic Sans MS;font-size:12pt;white-space:nowrap;">' + ltr_marquee_Text + '</span>'; ltr_marquee = new xbMarquee('ltr_marquee', '19px', '90%', 6, 100, ltr_marquee_Direction, 'scroll', ltr_marquee_Contents); window.setTimeout( init, 200);--></script>

<style type="text/css">body {scrollbar-base-color:orange;}</style><!-- Place the above styles between the document's <head></head> tags or in an external stylesheet --><textarea cols="20" rows="4">Here's enough text to make this textarea grow scrollbars.... HTML scrollbars, scrollbar color, change browser scrollbars, css scrollbar, change color of the scrollbar...</textarea>

<style type="text/css">textarea {scrollbar-base-color:orange;}</style><!-- Place the above styles between the document's <head></head> tags or in an external stylesheet --><textarea cols="20" rows="4">Here's enough text to make this textarea grow scrollbars.... HTML scrollbars, scrollbar color, change browser scrollbars, css scrollbar, change color of the scrollbar...</textarea>

<style type="text/css">textarea.orange-scrollbar {scrollbar-base-color:orange;}textarea.red-scrollbar {scrollbar-base-color:red;}</style><!-- Place the above styles between the document's <head></head> tags or in an external stylesheet --><textarea cols="20" rows="4" class="orange-scrollbar">Here's enough text to make this textarea grow scrollbars.... HTML scrollbars, scrollbar color, change browser scrollbars, css scrollbar, change color of the scrollbar...</textarea><textarea cols="20" rows="4" class="red-scrollbar">Here's enough text to make this textarea grow scrollbars.... HTML scrollbars, scrollbar color, change browser scrollbars, css scrollbar, change color of the scrollbar...</textarea>

<style type="text/css">textarea.custom-scrollbar {scrollbar-3dlight-color:black; scrollbar-arrow-color:black; scrollbar-track-color:black; scrollbar-darkshadow-color:gray; scrollbar-face-color:orange; scrollbar-highlight-color:gold; scrollbar-shadow-color:brown}</style><!-- Place the above styles between the document's <head></head> tags or in an external stylesheet --><textarea cols="20" rows="4" class="custom-scrollbar">Here's enough text to make this textarea grow scrollbars.... HTML scrollbars, scrollbar color, change browser scrollbars, css scrollbar, change color of the scrollbar...</textarea>

hidden="false"autostart="true"></embed>

HTML Music Codes<audio src="/music/good_enough.mp3" controls>

<embed src="/music/good_enough.mp3"width="180"height="90"loop="false"autostart="false" />

</audio><embedsrc="/music/good_enough.mp3"width="180"height="90"loop="false"autostart="false" /><audio src="/music/good_enough.mp3" controls>

<embed src="/music/good_enough.mp3"width="300"height="90"loop="false"autostart="false" />

</audio><audio src="/music/good_enough.mp3"

preload="auto" controls>

<embed src="/music/good_enough.mp3"loop="false"autostart="false"hidden="true"mastersound />Listen to a sample of <a href="/web_design/lostmojo.wav">Lost Mojo</a>

HTML Background Music Codes<audio src="/music/good_enough.mp3" controls><p>If you are reading this, it is because your browser does not support the audio element.</p></audio><embed name="lostmojo" src="/web_design/lostmojo.wav" loop="false" hidden="true" autostart="true"><embed name="lostmojo" src="/web_design/lostmojo.wav" width="150" height="90" loop="false" autostart="false">

HTML Video Codes<video src="/video/pass-countdown.ogg" width="150px" height="75px" controls><p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p></video><p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p><object width="170px" height="144px">

<param name="allowFullScreen" value="true"/><param name="wmode" value="transparent"/><param name="movie" value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor="/><embed src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=" width="170px" height="144px" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>

</object><a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825">Watch this video</a>AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

MySpace Music Codes

quality="high"

bgcolor="#ffffff"

width="450"

height="345"

name="mp3player"

align=""

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>

HTML Frames Codes

<html>

<head>

<title>Frameset page<title>

</head>

<frameset cols = "25%, *">

<noframes>

<body>Your browser doesn't support frames.

Therefore, this is the noframe version of the site.</body>

</noframes>

<frame src ="/html/tutorial/frame_example_left.html" />

<frame src ="/html/tutorial/frame_example_right.html" />

</frameset>

</html>

<html>

<body style="background-color:green">

<p>This is the left frame (frame_example_left.html).</p>

<embed src="http://lads.myspace.com/theAnswer.swf"

</body>

</html>

<html>

<body style="background-color:yellow">

<p>This is the right frame (frame_example_right.html).</p>

</body>

</html>

<frameset

rows=""

cols=""

class=""

id=""

title=""

style=""

onload=""

onunload="" >

(the individual frames go here - see below)

</frameset>

HTML Form Codes<form action="/html/tags/html_form_tag_action.cfm" method="get"><fieldset><legend>Your Details</legend><div><label for="first_name">First Name:</label><br><input type="text" name="first_name" value="" maxlength="100" /><br></div><div><label for="lunch">Lunch:</label><br><input type="radio" name="lunch" value="pasta" /> Pasta<input type="radio" name="lunch" value="fish" /> Fish</div><div><label for="drinks">Drinks:</label><br><input type="checkbox" name="drinks" value="beer" /> Beer<input type="checkbox" name="drinks" value="wine" /> Wine</div><div><label for="city">Preferred City:</label><br><select name="city"> <option value ="sydney">Sydney</option> <option value ="melbourne">Melbourne</option> <option value ="cromwell">Cromwell</option>

<option value ="queenstown">Queenstown</option></select></div><div><label for="comments">Comments:</label><br><textarea rows="3" cols="20" name="comments"></textarea></div><div><input type="submit" value="Submit" /></div></fieldset></form>

HTML Text Input<form action="/html/tags/html_form_tag_action.cfm" method="get">First name:<input type="text" name="first_name" value="" maxlength="100" /><br />Last name:<input type="text" name="last_name" value="" maxlength="100" /><input type="submit" value="Submit" /></form><form action="/html/tags/html_form_tag_action.cfm" method="post">Comments:<br /><textarea name="comments" id="comments">Hey... I've got so much to say that it takes more than one line!</textarea><br /><input type="submit" value="Submit" /></form>

HTML Form To Email

<form action="mailto:name@example.com?subject=Website Feedback" method="post" enctype="text/plain">Email Adress:<br /><input type="text" name="email_address" value="" maxlength="100" /><br />

Comments:<br /><textarea rows="5" cols="20" name="comments"></textarea><br />

<input type="submit" value="Submit" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Feedback Form</title> </head><body><h1>Send Us Your Feedback!</h1><form action="send_mail.php" method="post"><table><tr><td>Email Adress:</td><td><input type="text" name="email_address" value="" maxlength="100" /></td></tr><tr><td>Comments:</td><td>&lt;textarea rows="10" cols="50" name="comments"&gt;&lt;/textarea&gt;</td></tr><tr><td>&nbsp;</td><td><input type="submit" value="Submit" /></td></tr></table></form><p>Form code inspired by <a href="http://www.quackit.com">Quackit.com</a>!</p></body></html>

<?php// This function checks for email injection. Specifically, it checks for carriage returns - typically used by spammers to inject a CC list.function isInjected($str) { $injections = array('(\n+)', '(\r+)', '(\t+)', '(%0A+)', '(%0D+)', '(%08+)', '(%09+)' ); $inject = join('|', $injections); $inject = "/$inject/i"; if(preg_match($inject,$str)) { return true; } else { return false; }}

// Load form field data into variables.$email_address = $_REQUEST['email_address'] ;$comments = $_REQUEST['comments'] ;

// If the user tries to access this script directly, redirect them to feedback form,if (!isset($_REQUEST['email_address'])) {header( "Location: feedback_form.html" );}

// If the form fields are empty, redirect to the error page.elseif (empty($email_address) || empty($comments)) {header( "Location: error_message.html" );}

// If email injection is detected, redirect to the error page.elseif ( isInjected($email_address) ) {header( "Location: error_message.html" );}

// If we passed all previous tests, send the email!else {mail( "name@example.com", "Feedback Form Results", $comments, "From: $email_address" );header( "Location: thank_you.html" );}?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Thank You</title> </head><body><h1>Thanks for your feedback!</h1><p>We appreciate that you took the time to send us feedback. Your feedback has been sent to the webmaster.</p><p><a href="feedback_form.html">Back to feedback form</a>.</p><p>Form code inspired by <a href="http://www.quackit.com">Quackit.com</a>!</p></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Error</title> </head><body><h1>Oops!</h1><p>Please ensure you have completed both fields before submitting the form. </p><p>Also ensure that there is only one email address.</p><p><a href="JavaScript:history.go(-1);">Back</a></p><p>Form code inspired by <a href="http://www.quackit.com">Quackit.com</a>!</p></body></html>

Mailto Form

</form>

<input type="button" value="Click me!" onclick="JavaScript:alert('Thanks... I feel much better now!')" /><button type="button" onclick="JavaScript:alert('You liked that, didn\'t you!')">Go ahead... make my day!</button><button type="button" onclick="JavaScript:alert('Once upon a time, there lived a princess and a frog. They both got married and lived happily ever after. The end.')"><img src="/pix/web_graphics/free_website_graphics/icons/books/book13.gif" alt="Read book" /><br />Read Book!</button>

HTML Radio Button<form action="/html/codes/html_form_handler.cfm" method="get"><input type="radio" name="preferred_color" value="Red" /> Red<br /><input type="radio" name="preferred_color" value="Blue" /> Blue<br /><input type="radio" name="preferred_color" value="Green" /> Green<br /><input type="submit" value="Submit"></form><form action="/html/codes/html_form_handler.cfm" method="get"><p><b>Preferred Color:</b></p><input type="radio" name="preferred_color" value="Red" /> Red<br /><input type="radio" name="preferred_color" value="Blue" /> Blue<br /><input type="radio" name="preferred_color" value="Green" /> Green<br />

<p><b>Preferred Item:</b></p><input type="radio" name="preferred_item" value="Car" /> Car (The latest Aston Martin!)<br /><input type="radio" name="preferred_item" value="House" /> House (Waterfront Mansion)<br /><input type="radio" name="preferred_item" value="Coffee Machine" /> Coffee Machine (umm...but it's a really good one...)<br /><input type="submit" value="Submit"></form>

Contenteditable<div contenteditable>Try editing this content... go on... select me with your cursor then write over the top of me!</div><button onclick="document.execCommand('bold',false,null);">Bold</button><div contenteditable>Try making some of this text bold...</div><button onclick="document.execCommand('bold',false,null);">Bold</button><button onclick="document.execCommand('italic',false,null);">Italic</button><div contenteditable>Try making some of this text bold or even italic...</div>

HTML Button

<script type="text/javascript">function displayHtml() {HTMLCode = document.getElementById('source').innerHTML;document.getElementById('display').textContent = HTMLCode;return HTMLCode;}</script><div onclick="displayHtml();"><button onclick="document.execCommand('bold',false,null);">Bold</button><button onclick="document.execCommand('italic',false,null);">Italic</button><div contenteditable id="source" onkeyup="JavaScript:displayHtml();">Try making some of this text bold or even italic...</div></div><p>And here's the generated code:</p><textarea style="width:130px;height:130px;" id="display"></textarea>

<div style="width:200px;height:100px;border:1px solid blue;">HTML borders are best created with CSS.</div><div style="width:200px;height:100px;border:2px dotted blue;">HTML border code - or should that read CSS border code?</div><div style="width:200px;height:100px;border:2px dashed blue;">HTML border code - or should that read CSS border code?</div><div style="width:200px;height:100px;border:6px outset orange;">HTML border code - or should that read CSS border code?</div><div style="width:200px;height:100px;border:6px inset orange;">HTML border code - or should that read CSS border code?</div>

HTML Code for Colors<div style="background-color:Chartreuse;border:1px solid Olive;color:Orange;width:160px;padding:5px;"><p>HTML code for colors or <span style="color:black">CSS code for colors</span> that's the question...</p></div>

<!--The browser will hide this comment because it is surrounded by comment code.--><p>The browser will display this comment because it is not surrounded by comment code.</p>

HTML Cursor Codes<p>(Hover over each line to see the cursor effect).</p><div><p style="cursor:auto">Cursor: "Auto"</p><p style="cursor:default">Cursor: "Default"</p><p style="cursor:text">Cursor: "Text"</p><p style="cursor:help">Cursor: "Help"</p><p style="cursor:pointer">Cursor: "Pointer"</p><p style="cursor:wait">Cursor: "Wait"</p><p style="cursor:crosshair">Cursor: "Crosshair"</p><p style="cursor:move">Cursor: "Move"</p><p style="cursor:smile">Cursor: "Smile"</p><p style="cursor:progress">Cursor: "Progress"</p><p style="cursor:e-resize">Cursor: "e-resize"</p><p style="cursor:ne-resize">Cursor: "ne-resize"</p><p style="cursor:nw-resize">Cursor: "nw-resize"</p><p style="cursor:n-resize">Cursor: "n-resize"</p>

HTML Border Codes

HTML Comments Codes

<p style="cursor:se-resize">Cursor: "se-resize"</p><p style="cursor:sw-resize">Cursor: "sw-resize"</p><p style="cursor:s-resize">Cursor: "s-resize"</p><p style="cursor:w-resize">Cursor: "w-resize"</p></div>

<ol><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ol><ul><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ul><p>(Add as many list items as you need, remove what you don&#39;t need)</p><p style="font-size:10px;"><a href="http://www.quackit.com/html/codes/list/">HTML List</a></p><ul><li>Apples</li><li>Oranges</li><li>Bananas</li></ul><ol><li>Apples</li><li>Oranges</li><li>Bananas</li></ol><h4>Example 1</h4><dl><dt>Definition List</dt><dd>A list of terms and their definitions / descriptions.</dd><dt>Ordered List</dt><dd>A numbered list.</dd><dt>Unordered List</dt><dd>An unnumbered list.</dd></dl>

<h4>Example 2</h4><dl><dt>Vocals</dt><dd>Bruce Dickinson</dd><dt>Guitar</dt><dd>Adrian Smith</dd>

HTML List

<dd>Dave Murray</dd><dd>Janick Gers</dd><dt>Bass</dt><dd>Steve Harris</dd><dt>Drums</dt><dd>Nicko McBrain</dd></dl><menu><li>Command 1</li><li>Command 2</li><li>Command 3</li></menu>

<meta http-equiv="refresh" content="5"/><meta http-equiv="refresh" content="0;url=http://www.natural-environment.com/"/>

HTML Redirect Codes<meta http-equiv="Refresh" content="5; url=http://www.quackit.com/html/tags/">

Timed redirect

<style type="text/css">

body {

background-color:CCCC00;

background-image:url(http://www.quackit.com/pix/smile.gif);

background-repeat:no-repeat;

background-position:top left;

background-attachment:fixed;

}

table table table {

background-color:CCFF66;

}

table, tr, td {

background:transparent; border:0px;

}

table table {

border:0px;

}

HTML Meta Refresh Code

<script type="text/JavaScript"><!--setTimeout("location.href = 'http://www.natural-environment.com';",1500);--></script>

<script type="text/JavaScript"><!--redirectTime = "1500";redirectURL = "http://www.natural-environment.com";function timedRedirect() { setTimeout("location.href = redirectURL;",redirectTime);}// --></script>

<div style="background-color:#ffcc00;padding:5px;width:100px;cursor:pointer;" onclick="JavaScript:timedRedirect()"> Click me for a timed redirect.</div>

<script type="text/JavaScript"><!--function eventualRedirect(redirectTo, timeoutPeriod) { setTimeout("location.href = redirectTo;",timeoutPeriod);}// --></script>

<div style="background-color:#a5ed3f;padding:5px;width:100px;cursor:pointer;" onclick="JavaScript:eventualRedirect(redirectTo='http://www.natural-environment.com', timeoutPeriod='1500')">Go to Natural Environment.</div><br /><div style="background-color:#dee3a6;padding:5px;width:100px;cursor:pointer;" onclick="JavaScript:eventualRedirect(redirectTo='http://www.great-workout.com', timeoutPeriod='2500')">Go to Great Workout.</div>

MySpace Background

table table table table {

border:0px;

}

</style>

MySpace Comment Box

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input type="hidden" name="friendID" value="123456"><textarea name="f_comments" cols="40" rows="5"">Enter your comments here...

(Hey... don't forget to change the friendID to your own!)</textarea><br><input type="submit" value="Submit" /><input type="reset" value="Reset" /></form>

<h3 style="cursor:help">Hover over me... "Help"</h3><h3 style="cursor:pointer">Hover over me... "Pointer"</h3><h3 style="cursor:wait">Hover over me... "Wait"</h3><h3 style="cursor:crosshair">Hover over me... "Crosshair"</h3><h3 style="cursor:move">Hover over me... "Move"</h3><h3 style="cursor:url(http://www.quackit.com/pix/smile.gif),auto">Hover over me... "Smile"</h3>

MySpace Music

quality="high"

bgcolor="#ffffff"

width="450"

height="345"

name="mp3player"

align=""

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">

</embed>

MySpace Overlapping Text

<p style="line-height:15px;text-align:center;">

<span style="font-family:Garamond;font-size:22px;color:3366CC;font-style:normal;font-weight:bold;">

Coding overlapping text<br>

<span style="font-family:Cursive;font-size:48px;color:99FF33;font-style:italic;font-weight:normal;">

...is easy!</span>

</span>

</p>

MySpace Cursor

<embed src="http://lads.myspace.com/theAnswer.swf"

MySpace Scroll Box

<!-- Codes by Quackit.com --><style type="text/css">div.myspace-scroll-box {height:100px;width:200px;font:10pt/20pt Verdana,arial,sans-serif;overflow:scroll;}</style><div class="myspace-scroll-box">Enter your scroll box text here... once there's enough text, the box will grow scroll bars!You can also put pictures in here and it will scroll if the picture is too big.</div>

MySpace Slide Show

All HTML Tags

<div align=center><table width=400 border=0 align=center><tr><td><marquee width=400><img src=http://www.quackit.com/pix/milford_sound/kea_and_homer_tunnel2_t.JPG /><img src=http://www.quackit.com/pix/milford_sound/milford_sound_t.JPG /><img src=http://www.quackit.com/pix/smile.gif /></marquee></td></tr></table></div>

<!--...--> <frame> <p><!doctype><frameset><param><a> <h1> <pre><abbr> <h2> <q><acronym><h3> <s><address><h4> <samp><applet> <h5> <script><area> <h6> <select><b> <head> <small><base> <hr> <span><basefont><html> <strike><bdo> <i> <strong><big> <iframe> <style><blockquote><img> <sub><body> <input> <sup><br> <ins> <table><button> <isindex> <tbody><caption><kbd> <td><center> <label> <textarea><cite> <legend> <tfoot><code> <li> <th><col> <link> <thead><colgroup><map> <title><dd> <menu> <tr><del> <meta> <tt>

HTML Examples<p><span style="font-size:10px;">Small font</span><span style="font-size:18px;">Large font</span><span style="font-size:12px;color:orange;">Colored font</span><span style="font-size:12px;font-weight:bold;">Bold font</span><span style="font-size:12px;font-style:italic;">Italic font</span> and more...</p><div class="more-info"><a href="http://www.quackit.com/html/examples/html_text_examples.cfm">More Text Examples...</a></div>

<p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a></p><div class="more-info"><a href="http://www.quackit.com/html/examples/html_links_examples.cfm">More Link Examples...</a></div>

<p>List Example:</p><ol><li>HTML Examples</li><li>HTML Tutorial</li><li>HTML Codes</li><li>and much more!</li></ol><div class="more-info"><a href="http://www.quackit.com/html/examples/html_lists_examples.cfm">More List Examples...</a></div>

<p>Image Example:</p><a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a><div class="more-info"><a href="http://www.quackit.com/html/examples/html_images_examples.cfm">More Image Examples...</a></div>

<p>Form Example:</p><form action="/html/tags/html_form_tag_action.cfm"><textarea cols="10" rows="5">Type something</textarea><br /><input type="submit" value="Send Away!" /></form><div class="more-info"><a href="http://www.quackit.com/html/examples/html_forms_examples.cfm">More Form Examples...</a></div>

<p>Frames Example:</p><iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="70%">

<dfn> <noframes><u><dir> <noscript><ul><div> <object> <var><dl> <ol><dt> <optgroup><em> <option><fieldset><font><form>

<p>Table Example:</p><table border="1" style="background-color:CornSilk;width:100%;"><tr><td colspan="2">Table cell 1</td></tr><tr><td width="20%">Table cell 2</td><td>Table cell 3</td></tr></table><div class="more-info"><a href="http://www.quackit.com/html/examples/html_tables_examples.cfm">More Table Examples...</a></div>

</iframe><div class="more-info"><a href="http://www.quackit.com/html/examples/frames/">More Frames Examples...</a></div>

HTML Character EntitiesOr this...

&lsquo;&rsquo;&sbquo;&ldquo;&rdquo;&bdquo;&dagger; dagger&Dagger;&permil;&lsaquo;&rsaquo;&spades;&clubs;&hearts;&diams;

&#9733; black star&#9734; white star

&oline;&larr;&uarr;&rarr;&darr;&copy; &#169;&trade;

&#00;-unused&#08;

&#09;&#10; line feed

&nbsp; &#160;&#32; space&#33;

&quot; &#34;&#35;&#36; dollar sign&#37;

&amp; &#38;&#39;&#40;

<p>JavaScript Jump Menu Example:</p><script language="javascript" type="text/javascript" ><!-- hidefunction jumpto(x){

if (document.form1.jumpmenu.value != "null") { document.location.href = x }}

// end hide --></script><form name="form1"><select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value=http://www.quackit.com>Quackit Homepage</option> <option value=http://www.quackit.com/javascript/>JavaScript</option> <option value=http://www.quackit.com/html/>HTML</option> <option value=http://www.quackit.com/css/>CSS</option> <option value=http://www.quackit.com/sql/tutorial/>SQL</option> <option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option> <option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option></select></form><div class="more-info"><p><a href="/javascript/examples/">More JavaScript Examples...</a></p></div>

To do this...

Type this...

Description

‘  left single quote

’  

right single quote

‚  

single low-9 quote

“  

left double quote

”  

right double quote

„  

double low-9 quote

†  ‡  

double dagger

‰  per mill sign

‹  

single left-pointing angle quote

›  

single right-pointing angle quote

♠  black spade suit

♣  black club suit

♥  black heart suit

♦  

black diamond suit

★  ☆  ‾  

overline, = spacing overscore

←  leftward arrow

↑  upward arrow

→  rightward arrow

↓  downward arrow

©  copyright sign

™  trademark sign

horizontal tabNon-breaking space

!  exclamation mark

"  

double quotation mark

#  number sign

$  %  

percent sign

&  ampersand

'  apostrophe

(  

left parenthesis

&#41;&#42; asterisk&#43; plus sign&#44; comma&#45; hyphen&#46; period

&middot; &#183;&#149; bullet

&frasl; &#47; slash

0 - 9&#48;-

digits 0-9&#57;&#58; colon&#59; semicolon

&lt; &#60;&#61;

&gt; &#62;&#63;&#64; at sign

A - Z&#65;-&#90;&#91;&#92; backslash&#93;&#94; caret&#95;&#96;

a - z&#97;-&#122;&#123;&#124;

&frasl; &#47; slash&deg; &#176;&plusmn; &#177;&sup2; &#178;&sup3; &#179;&acute; &#180;&micro; &#181; micro sign&para; &#182;&cedil; &#184; cedilla&sup1; &#185;&ordm; &#186;&raquo; &#187;&frac14; &#188;&frac12; &#189; one-half&frac34; &#190;

)  

right parenthesis

*  +  ,  -  .  ·  

middle dot

•  /  

:  ;  <  

less-than sign

=  equals sign

>  greater-than sign

?  question mark

@   uppercase letters A-Z

[  

left square bracket

\  ]  

right square bracket

^  _  

horizontal bar (underscore)

`  grave accent

lowercase letters a-z

{  left curly brace

|  vertical bar

/  °  

degree sign

±  plus or minus

²  superscript two

³  superscript three

´  acute accent

µ  ¶  

paragraph sign

¸  ¹  

superscript one

º  masculine ordinal

  

right angle quote

¼  one-fourth

½  ¾  

three-fourths

&iquest; &#191;&Agrave; &#192;&Aacute; &#193;&Acirc; &#194;&Atilde; &#195;&Auml; &#196;&Aring; &#197;&AElig; &#198;&Ccedil; &#199;&Egrave; &#200;&Eacute; &#201;&Ecirc; &#202;&Euml; &#203;&Igrave; &#204;&Iacute; &#205;&Icirc; &#206;&Iuml; &#207;&ETH; &#208;&Ntilde; &#209;&Ograve; &#210;&Oacute; &#211;&Ocirc; &#212;&Otilde; &#213;&Ouml; &#214;&times; &#215;&Oslash; &#216;&Ugrave; &#217;&Uacute; &#218;&Ucirc; &#219;&Uuml; &#220;&Yacute; &#221;&THORN; &#222;&szlig; &#223;&agrave; &#224;&aacute; &#225;&acirc; &#226;&atilde; &#227;&auml; &#228;&aring; &#229;&aelig; &#230;&ccedil; &#231;&egrave; &#232;&eacute; &#233;&ecirc; &#234;&euml; &#235;

¿  

inverted question mark

À  

uppercase A, grave accent

Á  

uppercase A, acute accent

  

uppercase A, circumflex accent

à uppercase A, tilde

Ä  uppercase A, umlaut

Å  uppercase A, ring

Æ  uppercase AE

Ç  uppercase C, cedilla

È  

uppercase E, grave accent

É  

uppercase E, acute accent

Ê  

uppercase E, circumflex accent

Ë  uppercase E, umlaut

Ì  

uppercase I, grave accent

Í  

uppercase I, acute accent

Π 

uppercase I, circumflex accent

Ï  uppercase I, umlaut

Р 

uppercase Eth, Icelandic

Ñ  uppercase N, tilde

Ò  

uppercase O, grave accent

Ó  

uppercase O, acute accent

Ô  

uppercase O, circumflex accent

Õ  uppercase O, tilde

Ö  uppercase O, umlaut

×  multiplication sign

Ø  uppercase O, slash

Ù  

uppercase U, grave accent

Ú  

uppercase U, acute accent

Û  

uppercase U, circumflex accent

Ü  uppercase U, umlaut

Ý  

uppercase Y, acute accent

Þ  

uppercase THORN, Icelandic

ß  

lowercase sharps, German

à  

lowercase a, grave accent

á  

lowercase a, acute accent

â  

lowercase a, circumflex accent

ã  lowercase a, tilde

ä  lowercase a, umlaut

å  lowercase a, ring

æ  lowercase ae

ç  lowercase c, cedilla

è  

lowercase e, grave accent

é  

lowercase e, acute accent

ê  

lowercase e, circumflex accent

ë  lowercase e, umlaut

&igrave; &#236;&iacute; &#237;&icirc; &#238;&iuml; &#239;&eth; &#240;&ntilde; &#241;&ograve; &#242;&oacute; &#243;&ocirc; &#244;&otilde; &#245;&ouml; &#246;&divide; &#247;&oslash; &#248;&ugrave; &#249;&uacute; &#250;&ucirc; &#251;&uuml; &#252;&yacute; &#253;&thorn; &#254;&yuml; &#255;

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6><div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<p>Normal paragraph text.</p><div class="more-info">More info: <a href="/html/tags/html_p_tag.cfm">HTML <code>&lt;p&gt;</code> tag</a></div>

I feel a line break coming... <br /> ...up.<div class="more-info">More info: <a href="/html/tags/html_br_tag.cfm"><code>&lt;br&gt;</code></a></div>

<b>Bold text.</b><div class="more-info">More info: <a href="/html/tags/html_b_tag.cfm"><code>&lt;b&gt;</code></a></div>

<i>Italic text.</i><div class="more-info">More info: <a href="/html/tags/html_i_tag.cfm"><code>&lt;i&gt;</code></a></div>

<p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p><div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

ì  

lowercase i, grave accent

í  

lowercase i, acute accent

î  

lowercase i, circumflex accent

ï  lowercase i, umlaut

ð  

lowercase eth, Icelandic

ñ  lowercase n, tilde

ò  

lowercase o, grave accent

ó  

lowercase o, acute accent

ô  

lowercase o, circumflex accent

õ  lowercase o, tilde

ö  lowercase o, umlaut

÷  division sign

ø  lowercase o, slash

ù  

lowercase u, grave accent

ú  

lowercase u, acute accent

û  

lowercase u, circumflex accent

ü  lowercase u, umlaut

ý  

lowercase y, acute accent

þ  

lowercase thorn, Icelandic

ÿ  lowercase y, umlaut

HTML Help

<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p><div class="more-info">More info: <a href="/html/codes/html_font_size_code.cfm">Font Size Code</a>, <a href="/html/codes/text/">HTML Text</a>, <a href="/css/properties/css_font-size.cfm">CSS <code>font-size</code> Property</a>.</div>

<p style="font-family:Georgia, Garamond, Serif;">Preferred serif font.</p><div class="more-info">More info: <a href="/css/properties/css_font-family.cfm">CSS <code>font-family</code></a>, <a href="/html/html_font_code.cfm">Font Code</a>.</div>

<pre style="color:black">Preformatted text displays just as you type it... ...line breaks, spaces... ...and all!</pre><div class="more-info">More info: <a href="/html/tags/html_pre_tag.cfm"><code>&lt;pre&gt;</code></a></div>

<tt>Teletype text - sometimes referred to as typewriter text.</tt><div class="more-info">More info: <a href="/html/tags/html_tt_tag.cfm"><code>&lt;tt&gt;</code></a></div>

<cite>Citation text.</cite><div class="more-info">More info: <a href="/html/tags/html_cite_tag.cfm"><code>&lt;cite&gt;</code></a></div>

<em>Emphasized text.</em><div class="more-info">More info: <a href="/html/tags/html_em_tag.cfm"><code>&lt;em&gt;</code></a></div>

<code style="color:black">Code text.</code><div class="more-info">More info: <a href="/html/tags/html_code_tag.cfm"><code>&lt;code&gt;</code></a></div>

<big>Big text.</big><div class="more-info">More info: <a href="/html/tags/html_big_tag.cfm"><code>&lt;big&gt;</code></a></div>

<small>Small text.</small><div class="more-info">More info: <a href="/html/tags/html_small_tag.cfm"><code>&lt;small&gt;</code></a></div>

<p>Here's a blockquote:</p><blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote><p>That was a blockquote.</p><div class="more-info">More info: <a href="/html/tags/html_blockquote_tag.cfm"><code>&lt;blockquote&gt;</code></a></div>

<del>Delete this text.</del><div class="more-info">More info: <a href="/html/tags/html_del_tag.cfm"><code>&lt;del&gt;</code></a></div>

<ins>Insert this text.</ins><div class="more-info">More info: <a href="/html/tags/html_ins_tag.cfm"><code>&lt;ins&gt;</code></a></div>

<kbd>Keyboard text - text to be entered by the user.</kbd><div class="more-info">More info: <a href="/html/tags/html_kbd_tag.cfm"><code>&lt;kbd&gt;</code></a></div>

<q>Quotation text.</q><div class="more-info">More info: <a href="/html/tags/html_q_tag.cfm"><code>&lt;q&gt;</code></a></div>

<samp>Sample text (output from a computer program).</samp><div class="more-info">More info: <a href="/html/tags/html_samp_tag.cfm"><code>&lt;samp&gt;</code></a></div>

<var>Variable text.</var><div class="more-info">More info: <a href="/html/tags/html_var_tag.cfm"><code>&lt;var&gt;</code></a></div>

<dfn>Definition.</dfn>: To define the meaning of a word, phrase or term.<div class="more-info">More info: <a href="/html/tags/html_dfn_tag.cfm"><code>&lt;dfn&gt;</code></a></div>

<p>Basic image:</p><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/tags/html_img_tag.cfm"><code>&lt;img&gt;</code></a>.</div>

<p>Image with border:</p><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:95%;border:5px solid black;" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/codes/html_image_borders.cfm">Image Borders</a>, <a href="/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<p>Linked image:</p><a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /></a><div class="more-info">More info: <a href="/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="/html/tutorial/html_image_maps.cfm">Image Maps</a>, <a href="/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p>

<p>You can bold <span style="font-weight:bold">parts</span> of your text using the HTML 'span' tag.</p>

<p>You can make <span style="font-style:italic">some</span> of your text italic using the HTML 'span' tag.</p>

<p>Normal text color <span style="color:green">different text color</span> normal text color <span style="background-color:yellow">different background color</span></p>

<textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;">

<textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;">

<textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;">

<input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" />

<textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;scrollbar-base-color:#638E0D;"> Hey... say something! (well, at least something that's long enough to make this comment box grow scrollbars...)

<input type="submit" value="Submit" style="background-color:#53760D;color:#D0F18F;" />

<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

<img style="max-width:95%;border:3px solid black;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div><img style="max-width:95%;border:2px dotted #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div><img style="max-width:95%;border:6px groove #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px double #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px outset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px inset #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px ridge #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:95%;border:6px dashed #545565;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" /><img style="max-width:90%;border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank">

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />

<img src="http://www.quackit.com/pix/byron_bay_225x169.jpg" border="0" style="border:none;max-width:100%;" alt="Photo of Byron Bay - one of Australia's best beaches!" />

<img src="http://www.quackit.com/pix/worlds_largest_rabbit_2_t.jpg" width="100" height="131" border="0" alt="Photo of a big bunny rabbit!" />

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /><img src="" width="" height="" border="" alt="" class="" id="" title="" style="" dir="" lang="" ismap="" usemap="" align="" hspace="" vspace="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

<div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">

<p>Example of a basic <a href="http://www.quackit.com/html/codes/html_link_code.cfm">HTML link</a>.</p>

<p>Check out this <a href="http://www.zappyhost.com/website_builder/" target="_blank">website builder</a>.</p>

<a href="http://www.quackit.com/html/tutorial/html_links.cfm#link_targets" target="_blank">Link Targets</a><a href="http://www.quackit.com/html/tutorial/html_links.cfm#link_targets" target="_blank">Link Targets</a>

<a href="http://www.quackit.com/html/html_help.cfm" target="_blank">HTML Help</a>

<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.

<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:80px;width:150px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />

<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br /><a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a>

<div style="height:220px;width:150px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.

<div style="border:1px solid black;width:150px;height:100px;overflow-y:hidden;overflow-x:scroll;">

By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.

<div style="border:1px solid black;width:150px;height:100px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">

By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.

Enter as much text as you can... until you'd expect a vertical scrollbar to appear. Go on!

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee><marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee><marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100" alt="smile" /></marquee>

<p>Sample text under a <a href="http://www.quackit.com/html/codes/html_marquee_code.cfm">Marquee image</a>.</p>

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="left">Your continuous scroll text goes here</marquee><marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee><marquee behavior="slide" direction="right">Your slide-in text goes here</marquee><marquee behavior="scroll" direction="right">Your continuous scrolling text goes here</marquee>

<marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee><marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee><marquee behavior="scroll" direction="down">Your downward scroller text goes here</marquee><marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee>

<marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee><marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">Your continuous scroll text goes here</marquee>

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="slide" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="alternate"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><marquee behavior="alternate" scrollamount="30"><img src="http://www.quackit.com/pix/tennis_ball.png" width="33" height="34" alt="Bouncing ball" /></marquee><marquee behavior="scroll" direction="up"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="down"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="10"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/big_fish_swimming_md_wht.gif" width="94" height="88" alt="Fish swimming from right to left" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Bat flying really fast" /></marquee><marquee behavior="scroll" direction="left" scrolldelay="800" scrollamount="100"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/71.gif" width="150" height="108" alt="Cup of tea anyone?" /></marquee>

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Go on... click me (and hold the mouse down)!</marquee><marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Go on... hover over me!</marquee>

<input type="button" value="Stop Marquee" onClick="document.getElementById('mymarquee').stop();"><input type="button" value="Start Marquee" onClick="document.getElementById('mymarquee').start();">

<input type="button" value="Stop Marquee 1" onClick="document.getElementById('marquee1').stop();"><input type="button" value="Start Marquee 1" onClick="document.getElementById('marquee1').start();"><br /><input type="button" value="Stop Marquee 2" onClick="document.getElementById('marquee2').stop();"><input type="button" value="Start Marquee 2" onClick="document.getElementById('marquee2').start();">

<marquee behavior="scroll" direction="left" scrollamount="12" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 12, 0);">Go on... click me (and hold the mouse down)!</marquee><marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Go on... hover over me!</marquee>

<input type="button" value="Slower" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 1, 0);"><input type="button" value="Normal Speed" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 6, 0);"><input type="button" value="Faster" onClick="document.getElementById('mymarquee').setAttribute('scrollamount', 12, 0);">

<a href="http://www.quackit.com/html/html_help.cfm" target="_blank">HTML Help</a>

<p>If you are reading this, it is because your browser does not support the audio element.</p>

<embed name="lostmojo" src="/web_design/lostmojo.wav" loop="false" hidden="true" autostart="true"><embed name="lostmojo" src="/web_design/lostmojo.wav" width="150" height="90" loop="false" autostart="false">

<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p>

<p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p>

<param name="movie" value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor="/><embed src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=" width="170px" height="144px" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>

<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825">Watch this video</a>

<form action="mailto:name@example.com?subject=Website Feedback" method="post" enctype="text/plain">

<input type="button" value="Click me!" onclick="JavaScript:alert('Thanks... I feel much better now!')" /><button type="button" onclick="JavaScript:alert('You liked that, didn\'t you!')">Go ahead... make my day!</button><button type="button" onclick="JavaScript:alert('Once upon a time, there lived a princess and a frog. They both got married and lived happily ever after. The end.')"><img src="/pix/web_graphics/free_website_graphics/icons/books/book13.gif" alt="Read book" />

<input type="radio" name="preferred_item" value="Car" /> Car (The latest Aston Martin!)<br /><input type="radio" name="preferred_item" value="House" /> House (Waterfront Mansion)<br /><input type="radio" name="preferred_item" value="Coffee Machine" /> Coffee Machine (umm...but it's a really good one...)<br />

Try editing this content... go on... select me with your cursor then write over the top of me!

<div style="background-color:Chartreuse;border:1px solid Olive;color:Orange;width:160px;padding:5px;"><p>HTML code for colors or <span style="color:black">CSS code for colors</span> that's the question...</p>

<p>The browser will display this comment because it is not surrounded by comment code.</p>

<p style="font-size:10px;"><a href="http://www.quackit.com/html/codes/list/">HTML List</a></p>

<meta http-equiv="refresh" content="0;url=http://www.natural-environment.com/"/>

<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">

<h3 style="cursor:url(http://www.quackit.com/pix/smile.gif),auto">Hover over me... "Smile"</h3>

<span style="font-family:Garamond;font-size:22px;color:3366CC;font-style:normal;font-weight:bold;">

<span style="font-family:Cursive;font-size:48px;color:99FF33;font-style:italic;font-weight:normal;">

Enter your scroll box text here... once there's enough text, the box will grow scroll bars!

<div class="more-info"><a href="http://www.quackit.com/html/examples/html_text_examples.cfm">More Text Examples...</a></div>

<p><a href="http://www.quackit.com/html/tutorial/html_links.cfm">Example Link</a></p><div class="more-info"><a href="http://www.quackit.com/html/examples/html_links_examples.cfm">More Link Examples...</a></div>

<div class="more-info"><a href="http://www.quackit.com/html/examples/html_lists_examples.cfm">More List Examples...</a></div>

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a><div class="more-info"><a href="http://www.quackit.com/html/examples/html_images_examples.cfm">More Image Examples...</a></div>

<div class="more-info"><a href="http://www.quackit.com/html/examples/html_forms_examples.cfm">More Form Examples...</a></div>

<iframe src="/html/templates/frames/frames_example_1.html" width="80%" height="70%">

<div class="more-info"><a href="http://www.quackit.com/html/examples/frames/">More Frames Examples...</a></div>

<div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<div class="more-info">More info: <a href="/html/tags/html_p_tag.cfm">HTML <code>&lt;p&gt;</code> tag</a></div>

<div class="more-info">More info: <a href="/html/tags/html_br_tag.cfm"><code>&lt;br&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_b_tag.cfm"><code>&lt;b&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_i_tag.cfm"><code>&lt;i&gt;</code></a></div>

<p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p><div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p><div class="more-info">More info: <a href="/html/codes/html_font_size_code.cfm">Font Size Code</a>, <a href="/html/codes/text/">HTML Text</a>, <a href="/css/properties/css_font-size.cfm">CSS <code>font-size</code> Property</a>.</div>

<div class="more-info">More info: <a href="/css/properties/css_font-family.cfm">CSS <code>font-family</code></a>, <a href="/html/html_font_code.cfm">Font Code</a>.</div>

<div class="more-info">More info: <a href="/html/tags/html_pre_tag.cfm"><code>&lt;pre&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_tt_tag.cfm"><code>&lt;tt&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_cite_tag.cfm"><code>&lt;cite&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_em_tag.cfm"><code>&lt;em&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_code_tag.cfm"><code>&lt;code&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_big_tag.cfm"><code>&lt;big&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_small_tag.cfm"><code>&lt;small&gt;</code></a></div>

<blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote>

<div class="more-info">More info: <a href="/html/tags/html_blockquote_tag.cfm"><code>&lt;blockquote&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_del_tag.cfm"><code>&lt;del&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_ins_tag.cfm"><code>&lt;ins&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_kbd_tag.cfm"><code>&lt;kbd&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_q_tag.cfm"><code>&lt;q&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_samp_tag.cfm"><code>&lt;samp&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_var_tag.cfm"><code>&lt;var&gt;</code></a></div>

<div class="more-info">More info: <a href="/html/tags/html_dfn_tag.cfm"><code>&lt;dfn&gt;</code></a></div>

<img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/tags/html_img_tag.cfm"><code>&lt;img&gt;</code></a>.</div>

<img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:95%;border:5px solid black;" alt="Milford Sound in New Zealand" /><div class="more-info">More info: <a href="/html/codes/html_image_borders.cfm">Image Borders</a>, <a href="/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /></a><div class="more-info">More info: <a href="/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="/html/tutorial/html_image_maps.cfm">Image Maps</a>, <a href="/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p>

<p>Normal text color <span style="color:green">different text color</span> normal text color <span style="background-color:yellow">different background color</span></p>

<textarea name="comments" id="comments" style="width:160px;height:90px;background-color:#D0F18F;color:#53760D;font:24px/30px cursive;scrollbar-base-color:#638E0D;">

<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<img style="max-width:90%;border-width:10px;border-color:#545565;border-style:dotted dashed solid double;" src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" alt="Milford Sound in New Zealand" />

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" border="2" style="border:2px solid black;max-width:100%;" alt="Photo of Milford Sound in New Zealand!" />

<img src="http://www.quackit.com/pix/byron_bay_225x169.jpg" border="0" style="border:none;max-width:100%;" alt="Photo of Byron Bay - one of Australia's best beaches!" />

<img src="" width="" height="" border="" alt="" class="" id="" title="" style="" dir="" lang="" ismap="" usemap="" align="" hspace="" vspace="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

<div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;">We have added a background color to this HTML scroll box. This is done using the CSS 'background-color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;">We have changed the color of the text inside this scroll box. We did this using the CSS 'color' property.</div><div style="height:90px;width:150px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;">We have changed the color of the scroll bars of this scroll box. We did this using the CSS 'scrollbar-base-color' property.</div>

<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:80px;width:150px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />

<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br /><a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a>

<div style="height:220px;width:150px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.

By using overflow-x, we can create scroll bars when the contents of this div are wider than the container. By setting this paragraph to 250 percent, it is 250 percent wider than the parent container - forcing an overflow.

By using overflow-y, we can create scroll bars when the contents of this div are bigger/higher than the container. Also, by setting this paragraph to 250 percent, it is automatically 250 percent higher than the parent container - forcing an overflow.

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee><marquee behavior="slide" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee>

<marquee behavior="scroll" direction="up"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="down"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="right" scrollamount="10"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bee.gif" width="72" height="79" alt="Flying Bee" /></marquee><marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/big_fish_swimming_md_wht.gif" width="94" height="88" alt="Fish swimming from right to left" /></marquee><marquee behavior="scroll" direction="left" scrollamount="30"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Bat flying really fast" /></marquee><marquee behavior="scroll" direction="left" scrolldelay="800" scrollamount="100"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/71.gif" width="150" height="108" alt="Cup of tea anyone?" /></marquee>

<marquee behavior="scroll" direction="left" scrollamount="12" onmousedown="this.setAttribute('scrollamount', 3, 0);" onmouseup="this.setAttribute('scrollamount', 12, 0);">Go on... click me (and hold the mouse down)!</marquee><marquee behavior="scroll" direction="left" scrollamount="12" onmouseover="this.setAttribute('scrollamount', 3, 0);" onmouseout="this.setAttribute('scrollamount', 12, 0);">Go on... hover over me!</marquee>

<p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p>

<param name="movie" value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor="/><embed src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=" width="170px" height="144px" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a>

<div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<p style="color:#B22222">Color text and <span style="color:limegreen;">another color</span>, and now back to the same. Oh, and here's a <span style="background-color:PaleGreen;">different background color</span> just in case you need it!</p><div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

<p style="font-size:18pt">Text size using points.</p><p style="font-size:18px">Text size using pixels.</p><p style="font-size:larger">Text size using relative sizes.</p><div class="more-info">More info: <a href="/html/codes/html_font_size_code.cfm">Font Size Code</a>, <a href="/html/codes/text/">HTML Text</a>, <a href="/css/properties/css_font-size.cfm">CSS <code>font-size</code> Property</a>.</div>

<div class="more-info">More info: <a href="/css/properties/css_font-family.cfm">CSS <code>font-family</code></a>, <a href="/html/html_font_code.cfm">Font Code</a>.</div>

<div class="more-info">More info: <a href="/html/codes/html_image_borders.cfm">Image Borders</a>, <a href="/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;" alt="Milford Sound in New Zealand" /></a><div class="more-info">More info: <a href="/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="/html/tutorial/html_image_maps.cfm">Image Maps</a>, <a href="/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<img src="" width="" height="" border="" alt="" class="" id="" title="" style="" dir="" lang="" ismap="" usemap="" align="" hspace="" vspace="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:80px;width:150px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br /><a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a>

<div style="height:220px;width:150px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

<marquee behavior="scroll" direction="left" scrollamount="1"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/big_fish_swimming_md_wht.gif" width="94" height="88" alt="Fish swimming from right to left" /></marquee>

<embed src="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=" width="170px" height="144px" allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>

<div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>

<div style="height:80px;width:150px;overflow:scroll;border:1px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px solid #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dotted #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px dashed #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px groove #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px double #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px ridge #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:80px;width:150px;overflow:scroll;border:9px outset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border:9px inset #0ADA0A;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div><div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<div style="height:220px;width:150px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

<div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<div class="more-info">More info: <a href="/html/codes/color/">HTML Color</a>, <a href="/css/properties/css_color.cfm">CSS <code>color</code> Property</a>, <a href="/css/properties/css_background-color.cfm">CSS <code>background-color</code> Property</a>, <a href="/html/codes/html_text_color_code.cfm">Text Color</a>, <a href="/css/css_color_codes.cfm">CSS Color Codes</a>.</div>

<p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p><p style="font: 14pt/20pt Garamond, Georgia, serif;color:#ff9900;">This font is 14pt, the line height is 20pt, it's color is orange, and the font family will be 'Garamond'. If the user's computer doesn't have 'Garamond', it will use 'Georgia'. Failing that it will use the default 'serif' font on the user's computer (this is often 'Times' or 'Times Roman' - just leave it as 'serif'). You can also specify <span style="font-weight:bold;">bold text</span> and <span style="font-style:italic">italics</span> if you wish!</p>

<div style="height:80px;width:150px;overflow:scroll;border-top:7px dashed #0ADA0A;border-right:7px dotted #000000;border-bottom:7px dashed #0ADA0A;border-left:8px solid #000000;">You can add borders to HTML scroll boxes using the CSS 'border' property. Borders can be of any thickness, and any color. You can specify whether it's solid, dotted, dashed, and more. You can also specify a different border for each side of your scroll box.</div>

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

<div class="more-info">More info: <a href="/html/tags/html_h1_tag.cfm"><code>&lt;h1&gt;</code></a>, <a href="/html/tags/html_h2_tag.cfm"><code>&lt;h2&gt;</code></a>, <a href="/html/tags/html_h3_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h4_tag.cfm"><code>&lt;h4&gt;</code></a>, <a href="/html/tags/html_h5_tag.cfm"><code>&lt;h5&gt;</code></a>, and <a href="/html/tags/html_h6_tag.cfm"><code>&lt;h6&gt;</code></a>.</div>

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>

<marquee behavior="slide" direction="left"><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /><img src="http://www.quackit.com/pix/web_graphics/free_website_graphics/clip_arts/bats_013.gif" width="125" height="82" alt="Flying Bat" /></marquee>