HTML HELP

Copy/Paste HTML Codes

Below you will find HTML codes that you can copy and paste right into your website or MySpace page etc.

Description	Code	Result
Text
Headings	<h1>Heading 1</h1><br /> <h2>Heading 2</h2><br /> <h3>Heading 3</h3><br /> <h4>Heading 4</h4><br /> <h5>Heading 5</h5><br /> <h6>Heading 6</h6>	Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Paragraphs	<p>Normal paragraph text.</p>	Normal paragraph text.
Line Break	I feel a line break coming... <br /> ...up.	I feel a line break coming... ...up.
Bold Text	<b>Bold text.</b>	Bold text.
Italic Text	<i>Italic text.</i>	Italic text.
Color Text	<p style="color:#ffcc00">Color text.</p>	Color text.
Text Size	<p style="font-size:18pt">Text size using points.</p><br /> <p style="font-size:18px">Text size using pixels.</p><br /> <p style="font-size:larger">Text size using relative sizes.</p>	Text size using points. Text size using pixels. Text size using relative sizes.
Font Family	<p style="font-family:Georgia, Garamond, Serif;">Preferred serif font.</p>	Preferred serif font.
Preformatted Text	<pre>Preformatted text displays just as you type it...<br /> ...line breaks, spaces and all!</pre>	Preformatted text displays just as you type it... ...line breaks, spaces and all!
Teletype Text	<tt>Teletype text - sometimes referred to as typewriter text.</tt>	Teletype text - sometimes referred to as typewriter text.
Citation Text	<cite>Citation text.</cite>	Citation text.
Emphasized Text	<em>Emphasized text.</em>	Emphasized text.
Code Text	<code>Code text.</code>	Code text.
Big Text	<big>Big text.</big>	Big text.
Small Text	<small>Small text.</small>	Small text.
Blockquote	The label says:<blockquote>Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.</blockquote>	The label says: Contents should not be swallowed. This is due to the enormous amount of harmful chemicals that has gone into this burger.
Deleted Text	<del>Delete this text.</del>	Delete this text.
Inserted Text	<ins>Insert this text.</ins>	Insert this text.
Keyboard Text	<kbd>Keyboard text - text to be entered by the user.</kbd>	Keyboard text - text to be entered by the user.
Quotation Text	<q>Quotation text.</q>	Quotation text.
Sample Text	<samp>Sample text (output from a computer program).</samp>	Sample text (output from a computer program).
Variable Text	<var>Variable text.</var>	Variable text.
Definition	<dfn>Definition.</dfn>: To define the meaning of a word, phrase or term.	Definition.: To define the meaning of a word, phrase or term.
Images
Image	<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
Image with Border	<img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="5" />
Linked Image	<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" /></a>
Linked Image with no Border	<a href="http://www.quackit.com/travel/new_zealand/milford_sound"><img src="/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" border="0" /></a>
Tables
Basic Table	<table border="1"><br /> <tr><br /> <td>Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />	Table cell 1 Table cell 2
Table with cellpadding, cellspacing, and width attributes	<table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />	Table cell 1 Table cell 2
Table with a Header Row	<table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th>Table header</th><br /> <th>Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />	Table header Table header Table cell 1 Table cell 2
Table with colspan Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th colspan="2">Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br />	Table header Table cell 1 Table cell 2
Table with rowspan Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%"><br /> <tr><br /> <th rowspan="2">Table header</th><td>Table cell 1<br /> </tr><br /> <tr><br /> <td>Table cell 2</td><br /> </tr><br /> </table><br />	Table header Table cell 1 Table cell 2
Table with CSS Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%"<br /> style="background-color:yellow;border:3px dashed black;"><br /> <tr><br /> <th style="text-align:left">Table header</th><br /> <th style="text-align:left">Table header</th><br /> </tr><br /> <tr><br /> <td width="20%">Table cell 1</td><td>Table cell 2</td><br /> </tr><br /> </table><br /> <br />	Table header Table header Table cell 1 Table cell 2
Forms
Basic Form Tags (insert all form elements between these tags)	<form><br /> (Insert form elements here)<br /> </form><br />	(Insert form elements here)
Text Input	<input type="text" size="30" value="Type something..." /><br />
Text Area	<textarea cols="10" rows="5">Type something</textarea><br />	Type something
Radio Buttons	<input type="radio" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="radio" name="cheat_sheet_example" value="Option2" /> Option 2<br />	Option 1 Option 2
Checkboxes	<input type="checkbox" name="cheat_sheet_example" value="Option1" /> Option 1 <input type="checkbox" name="cheat_sheet_example" value="Option2" /> Option 2<br /> <br />	Option 1 Option 2
Select List	<select name="cheat_sheet_example"><option value="Option1">Option 1<option value="Option2">Option 2<option value="Option3">Option 3</select><br />	Option 1Option 2Option 3
Submit Button	<input type="submit" value="Send Away!" /><br />
Image Button	<input type="image" src="/pix/smile.gif" /><br />
Lists
Ordered list (numbered list)	<ol><br /> <li>List item 1</li><br /> <li>List item 2</li><br /> <li>List item 3</li><br /> </ol><br />	List item 1 List item 2 List item 3
Unordered list (unnumbered list)	<ul><br /> <li>List item 1</li><br /> <li>List item 2</li><br /> <li>List item 3</li><br /> </ul><br />	List item 1 List item 2 List item 3
Definition list	<dl><br /> <dt>Term 1</dt><br /> <dd>Definition of term 1</dd><br /> <dt>Term 2</dt><br /> <dd>Definition of term 2</dd><br /> </dl><br />	Term 1 Definition of term 1 Term 2 Definition of term 2
Frames
Inline Frame	<iframe src="/pix/milford_sound/milford_sound_t.jpg"<br /> width="200"<br /> height="150"<br /> scrolling="auto"<br /> frameborder="1"><br /> <!--This bit is only viewed by browsers that don't support inline frames --><br /> Your browser doesn't support inline frames.<br /> </iframe><br />
Frames	The frameset (frame_example_frameset_1.html): <html><br /> <head><br /> <title>Frameset page<title><br /> </head><br /> <frameset cols = "25%, *"><br /> <noframes><br /> <body>Your browser doesn't support frames.<br /> Therefore, this is the noframe version of the site.</body><br /> </noframes><br /> <frame src ="/html/tags/frame_example_left.html" /><br /> <frame src ="/html/tags/frame_example_right.html" /><br /> </frameset><br /> </html><br /> The left frame (frame_example_left.html): <html><br /> <html><br /> <body style="background-color:green"><br /> <p>This is the left frame (frame_example_left.html).</p><br /> </body><br /> </html><br /> The right frame (frame_example_right.html): <html><br /> <html><br /> <body style="background-color:yellow"><br /> <p>This is the right frame (frame_example_right.html).</p><br /> </body><br /> </html><br />	View the result

Need More HTML Help?

In the following table, the left column contains an HTML topic, the right column provides links to where you can find help about that topic.

For this...	do this...
HTML help with tables	Scan the HTML table tutorial Check out the HTML table generator See the HTML table tag Learn about the CSS table-layout property to make large tables load faster Have a look at the CSS table-layout example
HTML help with images	See the HTML img tag Check out the GIF vs JPEG article Have a look at the animated GIF sample If you need help with an image map, check out the article on image maps
Help with hyperlinks	Learn about the HTML a tag To change the look of hyperlinks, see the CSS hyperlinks article If you need to set a default URL for hyperlinks, have a look at the HTML base tag
Help with image maps	Make sure you're familiar with the HTML img tag Read the image maps article For a more detailed understanding, learn about the HTML map tag and the HTML area tag
Help with fonts	Read the HTML font code article The above article suggests using CSS for fonts. In particular, learn about the following CSS properties: CSS font, CSS font-family, CSS font-size, CSS font-style, CSS font-weight CSS has other properties that can assist with text formatting and layouts. For example, CSS line-height, CSS letter-spacing, CSS text-transform, CSS text-align. There are many other CSS properties so, you might like to peruse the complete list of CSS properties to see what properties can assist you with your layouts.
Help with embedding music/audio/sound	Read the HTML music code article
Help with color	Read the hex color codes article View the html color code chart containing the 216 web safe colors Read about the CSS color property
Help with numbered (ordered) lists	Learn about the HTML ol tag
Help with unnumbered (unordered) lists	Learn about the HTML ul tag
Help with definition lists	Learn about the HTML dl tag
Help with forms	Learn about the HTML form tag You might also like to learn about the HTML fieldset tag, HTML legend tag
Help with frames	Learn about the HTML frameset tag
Help with inline frames	Learn about the HTML iframe tag You may also be interested in the CSS scrollbars article for creating a similar effect to inline frames
Help with metadata	Learn about the HTML meta tag
Help with HTML redirects	Read the HTML redirect article This article refers to the HTML meta tag for performing client side redirects
Help with adding JavaScript to a web page	Learn about the HTML script tag To learn about JavaScript, see the JavaScript page
Help with event handlers/intrinsic events	Learn about the JavaScript event handlers Peruse the complete list of HTML tags to see which intrinsic events work with which tags