HTML Cheat Sheet

Heading

<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

Paragrap

<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

<br /> <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

<br /> <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

<br /> <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

<br /> <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

<br /> <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

<br /> <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 />

1. List item 1
2. List item 2
3. 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

Posted in: HTML Mimpi