Cool HTML Codes are the foundation of nearly every website on the web. This page contains html animation codes, image codes, marquee codes, text effects, background codes, and some other neat effects, as well as an introduction to HTML. These are all really easy to copy and paste directly into your blog, website, forum, etc.
HTML codes are the language a browser uses to display a website. It is also what designers use to creat web pages, text, tables, and more. HTML can do a lot of neat things, in addition to simply creating a website. You can use HTML to create neat text effects, tables, links, background colors, marquees, and so much more. These are great for adding a customized look to your blog, website, eBay auction, forum, and more. I use HTML all the time even for wordpress, and these will also often work with Genesis (Studiopress), Thesis, Myspace, Youtube, eBay, forums, etc.
HTML stands for Hypertext Markup Language. Basically, it is a text code that represents a document on the web. This web page is made up of HTML codes & your web browser is reading these codes & displaying the colors, text, links, & tables.
Learning HTML by itself can be very difficult. So instead of learning how to create & enter your own HTML, just click the link below for some neat tips & tricks of HTML in easy-to-use “copy & paste” boxes.
How to Use These HTML Codes
- Highlight the text in the textboxes with your cursor by clicking & dragging or by placing your cursor in the text box & pressing CTRL A. This will highlight the html code.
- Then right click with your mouse & select “copy” OR press CTRL C. This will copy the html code for you.
- Then to paste it into your website or eBay auction (if you are doing this to your eBay auction or website make sure to first click on the “Enter HTML” tab on the description box to enter the HTML) simply right click again & click paste or press CTRL V. It should now look like this: <b>YOUR TEXT GOES HERE</b>
- Now where it says “YOUR TEXT GOES HERE” type what you want to say. Be careful to not delete any part of the code or it will not work. Once you switch from the HTML format to the regular text format what you typed should be bold. If it didn’t work make sure you didn’t delete some part of the code by accident.
HTML Text Effects
These HTML text codes are great for changing the style, color, and format of the text. You can use these basic HTML codes to alter the color of your font or text on your blogs, myspace, facebook, eBay auction listings, craigslist ads, HTML documents, and much more. Using HTML with text is a great way to really make a sentence or word stand out. These are great for sales pages where you want to emphasize certain features.
HTML text effects are usually very simple to use, and you can change the text with just a small change in the code.
HTML Text Effects
These HTML text codes are great for changing the style, color, and format of the text. You can use these basic HTML codes to alter the color of your font or text on your blogs, myspace, facebook, eBay auction listings, craigslist ads, HTML documents, and much more. Using HTML with text is a great way to really make a sentence or word stand out. These are great for sales pages where you want to emphasize certain features.
HTML text effects are usually very simple to use, and you can change the text with just a small change in the code.
| HTML Code To Center Your Text: |
HTML code to Right Align Your Text:
|
HTML Code to Left Align Your Text:
|
| HTML to Justify Your Text: |
| HTML Code to Bold Your Text: |
| HTML Code to Italicize Your Text: |
| HTML Code to Underline Your Text: |
| HTML Code to Underline, bold, & italicize your text: |
| Changing Text Size: with HTML | To change size, just change the 24 (but leave the ” “) to any size you want. |
| HTML for Changing Text Color: |
| HTML for Changing Text Style | Change allegro BT to any style you want. (example: Times New Roman) |
| HTML Text Line Here And Here! |
You can adjust the colors, size or alignment of the font by changing the code. |
|
You can adjust the colors, size or alignment of the font by changing the code. |
| Add Text Shadows HTML: | You can adjust the colors, size or alignment of the font by changing the code. |
| Add Shadows with A Blur: | You can adjust the colors, size or alignment of the font by changing the code. |
|
You can change alignment, color, size, etc. by modifying the code. |
| Making Text a Hyperlink: | Example: <a href=http://www.registerednursern.com/> Click Here</a> |
Make your Text Wavy
|
|
Make Your Text Flash!
|
HTML Marquee Codes
HTML Marquees are really great to add to your myspace, facebook, eBay auction listing, blogs, and websites. The movement of the Marquee is really a neat effect that can look really cool to your website visitors. It can grab attention when used in auction listings on sites such as eBay or Craigslist.The marquees on this page do not actually move. If you want to see how they work, copy them into your website or eBay auction listing.
*NOTE: When you are adding marquees to your eBay auction listing they will not work in standard mode in the item’s description part until once you are done making your eBay auction listing and then you press the submit button to put it on eBay.
These HTML marquee codes are great to add some movement to your auction, website, or Myspace. They can really get someone’s attention.
Most websites that are created using HTML use one of the basic codes below to indicate the background color to the web browser. By using the basic codes below, you can change the color of your basic HTML page.
Note: Remember, you can only check these by adding the code to an HTML page, etc.
| Make a Cool Wavy Marquee!!! |
T
e x t |
| >>Your Text Here!<< |
| Your Words Here |
| Your Text Goes Here |
| Put Your Text Here |
| Marquee That Scrolls Left |
| Marquee That Scrolls Right |
| Marquee That Scrolls UP |
| Marquee That Scrolls Down |
| Zigzag Marquee |
| Adding Color To Your Marquee |
| Make your Text Bouncy |
| Put Your Cursor over this! |
HTML Background Codes
Background HTML codes are great if you want to change the background of your website, blog, eBay listings, myspace, and more.Most websites that are created using HTML use one of the basic codes below to indicate the background color to the web browser. By using the basic codes below, you can change the color of your basic HTML page.
Note: Remember, you can only check these by adding the code to an HTML page, etc.
| Add a background color to your website.Note: this code will not work for eBay auctions. See below for instructions on how to make background colors for your auctions. |
| To make a background color for your eBay auction, just use this code. It will create one large table that you can use for a background. |
| Use this code to use an image (or picture) as a background for your website. |
| Make a background picture move along with you as you scroll. |
This is a cool html trick. Use this to let your visitors change the color of your background. Go ahead and add this code to you site & click the button & see the outline change colors!
|
| Add background music to your auction or website!Note: First, you will have to host your music just like you would with a picture. |
NOTE: This code does NOT work in eBay auctions but it will for your website! |
|
|
| Do you want to have a small image next to your cursur? To do this get a picture and simply host the picture & then use this html code to do it. A lot of peopld do this on myspace & in eBay Listings. |
| This html code prevents people from copying your auction or website context.This code works when you right click your mouse, & it will cause a pop up box! |
| Want to add a link to your eBay auction so people can watch it! |
| Allow visitors to add your webpage to their favorites! |
What is Gradients?
Gradients displays the combination of two or more colors as shown below −
Types of gradients
- Linear Gradients(down/up/left/right/diagonally)
- Radial Gradients
Linear gradients
Linear gradients are used to arrange two or more colors in linear formats like top to bottom
Top to bottom
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(pink,green); background: -o-linear-gradient(pink,green); background: -moz-linear-gradient(pink,green); background: linear-gradient(pink,green); } </style> </head> <body> <div id="grad1"></div> </body> </html>
It will produce the following result −
Left to right
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); } </style> </head> <body> <div id="grad1"></div> </body> </html>
It will produce the following result −
Diagonal
Diagonal starts at top left and right button
<html> <head> <style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , blue); } </style> </head> <body> <div id="grad1"></div> </body> </html>
It will produce the following result −
Multi color
<html> <head> <style> #grad2 { height: 100px; background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); background: linear-gradient(red, orange, yellow, red, blue, green,pink); } </style> </head> <body> <div id="grad2"></div> </body> </html>
It will produce the following result −
CSS3 Radial Gradients
Radial gradients appears at center
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); background: -o-radial-gradient(red 5%, green 15%, pink 60%); background: -moz-radial-gradient(red 5%, green 15%, pink 60%); background: radial-gradient(red 5%, green 15%, pink 60%); } </style> </head> <body> <div id="grad1"></div> </body> </html>
It will produce the following result −
CSS3 Repeat Radial Gradients
<html> <head> <style> #grad1 { height: 100px; width: 550px; background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%); background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%); background: repeating-radial-gradient(blue, yellow 10%, green 15%); } </style> </head> <body> <div id="grad1"></div> </body> </html>