Cool HTML Codes

Stephanie M. Kelley
Cool HTML Codes

If you are looking to jazz up your website without creating custom programming, you can use a few cool HTML codes to bring some excitement to a page. These codes will not only make your site stand out, they can also give it a professional edge.

12 Cool HTML Codes

If you aren't savvy enough to write your own HTML code, there are many places online that offer free, unrestricted codes to copy and paste into your own web pages. However, before you copy the codes, make sure you read and understand the site's terms of use, as some site owners want recognition for the codes being used including a link back from your site to theirs. Check -out these cool HTML codes that produce some interesting effects.

1. Countdown to a Specific Date

Create a countdown clock for a web site with the code found at Computer Hope. Insert a custom date into the code to make the display count down to a specific date. Be sure to change the date in the bold to your custom date.

<script type="text/javascript">

today = new Date();

BigDay = new Date("December 25, 2020");

msPerDay = 24 * 60 * 60 * 1000 ;

timeLeft = (BigDay.getTime() - today.getTime());

e_daysLeft = timeLeft / msPerDay;

daysLeft = Math.floor(e_daysLeft);

e_hrsLeft = (e_daysLeft - daysLeft)*24;

hrsLeft = Math.floor(e_hrsLeft);

minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);

document.write("There are only<BR> <H4>" + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </H4> Until December 25th 2020<P>");

</script>

2. Make a Small Window Pop-up

Make a new web site pop-up in a small window with this handy code found at Computer Hope.

<p><script type="text/javascript">

function NAME_IT() {window.open('http://www.computerhope.com/cgi-bin/search.cgi','EANITHING','toolbar=no,location=no, directories=no, status=yes, menubar=no, resizable=yes,

copyhistory=no, scrollbars=no, width=300, height=300');}

</p>

<p align="center">

<a href="javascript:NAME_IT();"SEARCH ENGINE </a>

</p>

3. Colorful Bullets for List

Big Nose Bird offers a code that allows you to have colorful bullets for your list, rather than the plain black ones that are most commonly used.

<DL>

<DD><IMG SRC="/graphics/bullets/40-99-20.gif">This is the first item</DD>

<DD><IMG SRC="/graphics/bullets/40-80-99.gif">This is the second item</DD>

<DD><IMG SRC="/graphics/bullets/40-99-20.gif"> This is the third item </DD>

</DL>

4. Make your Text Bouncy

Give your marquee line a little bounce with this code from How to Make a Website.

<marquee behavior=alternate width="202″ scrollamount="8″ scrolldelay="95″ height="37″ bgcolor="#00FFFF">Make your Text Bouncy</marquee>

5. Marquee

Marquee: <marquee=alternate width="120" scrollamount="5" scrolldelay="86" height="15" bgcolor="#F0FFFF">

<font size="4">Love to Know Sample Code </font></marquee>

6. Zigzag Marquee

You can also make your marquee line make a zigzag pattern.

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">YOUR TEXT HERE</marquee></marquee>

7. Colorful Table

<table style="background-color:yellow;"> <tr style="background-color:blue;color:white;">

<th>Table header 1</th><th>Table header 1</th></tr><tr><td>Love to Know cell 1</td><td style="background-color:lightblie;">Love to Know cell 2</td>

</tr></table>

8. Add Music to your Page

<EMBED SRC=LovetoknowSample.mid AUTOSTART=true WIDTH=134 HEIGHT=70 LOOP=2>

Add Shadowed Box: <html> <head><style type="text/css"> div {border:2px solid #a1a1;padding:10px 40px; background:#ffdddd;width:400px;border-radius:25px;-moz-border-radius:40px; }

</style></head><body><div>Love to Know Sample Box with Border</div></body></html>

9. Add a Welcome Message

<head> <script language="javascript" type="text/javascript">alert("Welcome to Name of Your Company")</script></head><font face="TimesNewRoman"><span style="font-size: 10pt; text-decoration: none"></span></a></font>

10. Colored Text Input Box

Field 1:<INPUT type="text" STYLE="color: #EEFFF; font-family: TimesNewRoman; font-weight: normal; font-size: 10px; background-color: #F2A4D2; width: 198px; height: 25px;" size="30" maxlength="30">

11. Colored Text Field with Dashed Border

<span style="color:red; background-color:lightblue; border:2px dashed; padding:2px;">

<strong>Love to Know Sample Text</strong></span>

12. Change Background Color

<BODY BGCOLOR="FEEFD"> This code is for a peach background. Check out background color codes at HTML Goodies.

Resources for More Interesting HTML Codes

There are many other code resources available to use. Examples of places where more options are available include:

HTML Code
  • Computer Hope: This website offers free computer help for everyone and also offers three cool HTML codes that you can add to your website. One is for a mouse over-prompti it makes a pop-up box appear when the user puts his mouse over a graphic or text. The site also features a code to select background code and one that allows visitors to type their own text prompt box.
  • Wild Tips: Besides basic HTML, Wild Tips also has some neat codes for you to use including code that makes text blurry, has shadows and other effects. The website also offers HTML codes for marquees and photo effects.
  • Big Nose Bird: This website offers free tutorials, scripts and graphics to site users. It also has several pages of cool HTML tricks, including demonstrations for colorful tables, instructions for using a strong background image in an effective manner, and creating a drop down box listing many different countries
  • W 3 Schools: This site, provides HTML code that allows users to send e-mail from a site along with several other interesting codes.

Customize Your Site with Cool Codes

If you understand web coding, you can always experiment and come up with your neat trick. If you aren't a webmaster, you can still create attractive, professional looking sites by using some interesting HTML codes like the ones presented here. You can add just about any type of HTML code to your website, as long you aren't using a site builder that disallows it. Some of the free website builders don't allow for HTML codes to be used, but if you are using a program that allows it, you will find that it is not difficult to add cool features to your site.

Cool HTML Codes