HTML Help / Cheat sheet from Quackit.com

Related:
• HTML Tutorial
• More HTML Codes
• HTML Tag List
• MySpace Codes

Need HTML help? You've come to the right place.

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> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <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> <p style="font-size:18px">Text size using pixels.</p> <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... ...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"> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table cell 1 Table cell 2
Table with cellpadding, cellspacing, and width attributes	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table cell 1 Table cell 2
Table with a Header Row	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th>Table header</th> <th>Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2
Table with colspan Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th colspan="2">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table cell 1 Table cell 2
Table with rowspan Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%"> <tr> <th rowspan="2">Table header</th><td>Table cell 1 </tr> <tr> <td>Table cell 2</td> </tr> </table>	Table header Table cell 1 Table cell 2
Table with CSS Applied	<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:yellow;border:3px dashed black;"> <tr> <th style="text-align:left">Table header</th> <th style="text-align:left">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>	Table header Table header Table cell 1 Table cell 2
Forms
Basic Form Tags (insert all form elements between these tags)	<form> (Insert form elements here) </form>	(Insert form elements here)
Text Input	<input type="text" size="30" value="Type something..." />
Text Area	<textarea cols="10" rows="5">Type something</textarea>	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	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	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>
Submit Button	<input type="submit" value="Send Away!" />
Image Button	<input type="image" src="/pix/smile.gif" />
Lists
Ordered list (numbered list)	<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>	List item 1 List item 2 List item 3
Unordered list (unnumbered list)	<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>	List item 1 List item 2 List item 3
Definition list	<dl> <dt>Term 1</dt> <dd>Definition of term 1</dd> <dt>Term 2</dt> <dd>Definition of term 2</dd> </dl>	Term 1 Definition of term 1 Term 2 Definition of term 2
Frames
Inline Frame	<iframe src="/pix/milford_sound/milford_sound_t.jpg" width="200" height="150" scrolling="auto" frameborder="1"> <!--This bit is only viewed by browsers that don't support inline frames --> Your browser doesn't support inline frames. </iframe>	&lt;!--This bit is only viewed by browsers that don't support inline frames --&gt; Your browser doesn't support inline frames.
Frames	The frameset (frame_example_frameset_1.html): <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/tags/frame_example_left.html" /> <frame src ="/html/tags/frame_example_right.html" /> </frameset> </html> The left frame (frame_example_left.html): <html> <html> <body style="background-color:green"> <p>This is the left frame (frame_example_left.html).</p> </body> </html> The right frame (frame_example_right.html): <html> <html> <body style="background-color:yellow"> <p>This is the right frame (frame_example_right.html).</p> </body> </html>	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

Links (Hyperlinks)

Links (Hyperlinks)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1.     To create a link to another document, by using the href attribute

2.     To create a bookmark inside a document, by using the name attribute

---

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this: Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

---

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

---

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:  <a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:                                                              <a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:                                                                      <a href="http://www.w3schools.com/html_links.htm#tips">

Graphics

GRAPHICS                                                 

A note about copyright
You should never use any graphics, images, text or photos without permission. There are several sites available on the Web where you can receive free images. But under no circumstances should you ever copy material unless the site says you can or you personally have received permission. It's just better to create your own stuff or ask (and get an okay) before you use someone else's stuff. Don't be a cheater!

File Formats

Two file formats have been developed to help keep files small, while maintain a high level of quality:

.gif files: graphic interchange format – 256 colors

.jpg files: joint photographic experts group – millions of colors

The Image tag
To place an image onto a Web page you will need to use the image tag. There are two very important things to remember about the image tag:

1.   It’s an empty tag (remember, that means there’s no closing tag, only a beginning).

2.   It requires attributes to be effective.

The image tag The image tag <img> has several attributes:

src--identifies the image and tells the browser where to get the image

alt—gives alternative text for those who are not viewing their pages as images.

height & width—tells the browser the size of the graphic (speeds up the downloading process

Let’s go through each one of the attributes in more detail.

SRC attribute
To help the browser identify and find an image, you use the following command:

<img src="../foldername/filename.gif">

Alt attribute

The alt attribute lets the user know what’s in the picture by providing descriptive text. It also has an added feature with the latest versions of Internet Explorer and Netscape Navigator. When the cursor arrow passes over artwork or a photo, a little rectangular box pops up that contains the alt copy. It’s a great way to add interest to your page or even give instructions to the user.

 

When things go wrong with your code, 

you need to do some detective work!

The image tag for this graphic looks like this:
<img src="mystery.jpg" alt="Detective at work!">

Height & Width attribute
When placing your images onto the screen, the browser looks for the height and width of your images. This is an excellent feature because it allows the browsers to set the space size aside while laying out the balance of the page. If you do not specify the size, the browser will stretch it or reduce it to fit.

Height and width are listed in pixels--those little dots that make up an image on a computer screen.

The code for this image is like this:
<img src="masks.jpg" width="149" height="140" alt="You can determine how large your images are by opening them in Navigator.">

Align Attribute
When you place a graphic on a page it will always appear to the left (that's the default or the standard for the browser). 

 However, you can place it to the right just by adding the align attribute to the image tag. And the code looks like this:
<img src="masks.jpg" align="right" width="149" height="140" alt="This is an example of a right-aligned image.">

And here's the code:
<p align="center"><img src="masks.jpg" align="center" width="149" height="140" alt="This is an example of a centered image."></p>

Learning Links                                       

 http://Quackit.com

http://www.w3schools.com

http://aptana.com/products/studio3/download