Free HTML Codes


Home     HTML Code     RGB Color     Name Color     SMS    Chinese Zodiac    Zodiac Sign     Astor Food     Love Link

 1     2     3     4     5     6

Grab your free HTML codes here! Everything from free music codes, free font codes, even free cursor codes!

Background Codes

HTML is very limited for setting backgrounds. You can only specify a background image on the body tag and setting a background color is limted to the document's body and tables.

To set the background properties for your page in HTML

 

<body background="/images/image_name.gif" bgcolor="orange">

******************************************************************

 

HTML Fixed Background

 

This article provides HTML fixed background code - code for fixing the background image of an HTML element so that it doesn't scroll when its containing block scrolls.

To fix the position of a background image, use the CSS background-attachment property.

Example code:

<div style="background-image:url(/pix/smile.gif);

              background-repeat:repeat;

              background-attachment:fixed;

              overflow:scroll;

              width:200px;

              height:100px;"></div>

******************************************************************

 

HTML Background Music Code

 

<embed name="lostmojo"

src="/web_design/lostmojo.wav"

loop="false"

hidden="true"

autostart="true">

</embed>

This code will run music in the background as soon as the page loads

******************************************************************

 

Adding Audio Controls

 

If you want your users to be able to control whether the background music plays or not, you can simply remove the hidden attribute (or change it to "false"). You can also add width and height to the controls. It's also a good idea to turn autostart off (autostart="false").

<embed name="lostmojo"

src="/web_design/lostmojo.wav"

loop="false"

width="300"

height="90"

hidden="false"

autostart="false">

</embed>

******************************************************************

 

HTML Background Image Code

 

HTML method

To set a background image for your page in HTML, do something like this:

<body background="/images/image_name.gif">

 

******************************************************************

 

HTML Font Code

 

<!-- HTML codes by Quackit.com - hope to see you again soon! -->

<p style="font: 14pt/20pt < xml="true" ns="urn:schemas-microsoft-com:office:smarttags" prefix="st1" namespace="">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>

******************************************************************

 

Font Family

 

<!-- HTML codes by Quackit.com - hope to see you again soon! -->

<p style="font-family:Garamond, Georgia, serif;">HTML font code is done using CSS.</p>

******************************************************************

 

Font Size

 

<!-- HTML codes by Quackit.com - hope to see you again soon! -->

<p style="font-size:20pt;">HTML font code is done using CSS.</p>

******************************************************************

 

HTML Text Color Code

 

Setting Text Color using Inline Styles:

 

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

******************************************************************

 

Setting Text Color using Embedded Styles:

<html>

<head>

<style type="text/css">

p.different-text-color { color: green; }

</style>

</head>

<body>

<p>Normal text color

<span class="different-text-color">different text color</span>

normal text color</p>

</body>

</html>

******************************************************************

 

HTML Text Box Code

 

You can use the following code as a basis for adding a text box to your website. This will enable your users to provide multi-line comments. Most browsers will render scroll bars on the text box as soon as its contents (i.e. users' comments) are too big for it.

To use this text box code, simply copy and paste it into your website and change the values to suit.

This HTML Text Box Code...

 

<form method="post" action="">

<textarea name="comments" cols="40" rows="5">

Enter your comments here...

</textarea><br>

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

</form>

******************************************************************

 

1. The Text Box Tag

For an explanation of all the attributes

<textarea

       name=""

       rows=""

       cols=""

       class=""

       id=""

       dir=""

       lang=""

       title=""

       style=""

       readonly=""

       disabled=""

       tabindex=""

       onfocus=""

       onblur=""

       onselect=""

       onchange=""

       onclick=""

       ondbclick=""

       onmousedown=""

       onmouseup=""

       onmouseover=""

       onmousemove=""

       onmouseout=""

       onkeypress=""

       onkeydown=""

       onkeyup="" >

</textarea>

******************************************************************

2. The HTML Form Tag

Note that text boxes are part of an HTML form. The HTML form tag also accepts its own attributes, as follows:

For an explanation of all the attributes

<form

       action=""

       method=""

       enctype=""

       accept-charset=""

       accept=""

       name=""

       class=""

       id=""

       dir=""

       lang=""

       target=""

       onSubmit=""

       onReset=""

       onclick=""

       ondbclick=""

       onmousedown=""

       onmouseup=""

       onmouseover=""

       onmousemove=""

       onmouseout=""

       onkeypress=""

       onkeydown=""

       onkeyup=""

>  </form>

******************************************************************

 

HTML Font Style Code

If you don't want to use the HTML text generator, copy the following code and paste into your HTML document (then change the values to suit) :

<p style="font-style:normal;">Font style is normal</p>

<p style="font-style:italic;">Font style is italic

<span style="font-style:normal"> back to normal</span>

back to italics again.</p>

******************************************************************

 

HTML Font Size Code

 

Absolute Size

Copy and paste this code:

<p style="font-size:xx-small;">Absolute size - xx-small</p>

<p style="font-size:x-small;">Absolute size - x-small</p>

<p style="font-size:small;">Absolute size - small</p>

<p style="font-size:medium;">Absolute size - medium</p>

<p style="font-size:large;">Absolute size - large</p>

<p style="font-size:x-large;">Absolute size - x-large</p>

<p style="font-size:xx-large;">Absolute size - xx-large</p>

******************************************************************

 

Relative Size

Copy and paste this code:

<p style="font-size:smaller;">

Font size specified using relative values - smaller

</p>

<p style="font-size:larger">

Font size specified using relative values - larger

</p>

******************************************************************

 

Fixed Length

Copy and paste this code:

<p style="font-size:15px;">Font size specified using pixels - 15px</p>

******************************************************************

 

 

Percentage Values

 

Copy and paste this code:

<p style="font-size:70%;">

Smaller font size specified using percentage values - 70%

</p>

<p style="font-size:120%">

Larger font size specified using percentage values - 120% </p>

******************************************************************

 

HTML Font Color Code

 

Setting Font Color - Option 1

Use this option if you only want to set the color of a small amount of text.

<p>Normal font color <span style="color:orange">different font color</span> normal font color</p>

******************************************************************

 

Setting Font Color - Option 2

Use this option if you have multiple blocks of text that all need to be the same color. A benefit of doing this is, if you later decide to change to a different color, you'll only need to do it in one place.

Note that you can set the font color for all paragraph text (or any other text) by using the element's name as the selector (i.e. p).

<html>

<head>

<style type="text/css">

p { color:black }

p.different-font-color { color:orange; }

</style>

</head>

<body>

<p>Normal font color

<span class="different-font-orange">different font color</span>

normal font color</p>

</body>

</html>

******************************************************************

 

Create a Music Playlist

 

Step 1 - Create a m3u File

A m3u file is a file that contains a list of songs. Follow these steps to create your m3u file (i.e. your playlist file):

Create a text file

Add a list of the mp3 files you want on your playlist. This can be the full path to the file or a relative path. Place each mp3 file name on a new line

Add any comments by preceeding them with a hash (#) symbol (this step is optional)

Save the file with a .m3u extension. For example, call it music_playlist.m3u

There it is - your music playlist file!

 

Example m3u File

Below is an example of an m3u file:

#This is my m3u file - it contains a list of songs

/music/title.mp3

/music/good_enough.mp3

/music/bonus.mp3

Now all you need to do is add your playlist to your music code.

******************************************************************

 

Step 2 - Add Your Playlist to your Music Code

Place the following code within your HTML file and change the values to suit:

Example Music Code

<embed name="music_playlist"

src="music_playlist.m3u"

width="300"

height="90"

loop="false"

hidden="false"

autostart="true">

</embed>

If you've ever added music to your website, you are probably familiar with this code.

******************************************************************

 

How to preload a sound file

 

You can preload music files so that the music starts immediately after the user has clicked on the link. You can preload using the following technique:

<embed name="lostmojo"

src="/web_design/lostmojo.wav"

loop="false"

autostart="false"

hidden="true"

mastersound>

 

******************************************************************

 

 

HTML Picture Codes

 

Example Picture Code

<img src="http:// jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

******************************************************************

 

 1     2     3     4     5     6