Surpass Web Hosting Forums - View Single Post - [Article] HTML Cheat-Sheet

**Roxy** · March 12th, 2008, 1:42 PM

For those who aren't quite sure what code to write out or for those who just need a reminder on a code/tag they forgot. All of your HTML coding needs start here!

Basic HTML Page Structure/"Skeleton"

Code:

<html>
<head>
<title>site's title goes here</title>
</head>

<body>
Site's Content would go here...
</body>
</html>

Commonly used HTML Tags (in alphabetical order)
Tag:

Code:

<a href="#">...</a>

Attribute(s): name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title
Description: this tag is used for anchors, but most commonly used to link text and images to other pages or websites with the href="URL" attribute.

Tag:

Code:

<b>...</b>

Attribute(s): (commonly none used) class, dir, id, style, title
Description: makes text appear larger than normal. this tag still works, however it is uncommonly used. stylesheets are a better alternative.

Tag:

Code:

<blockquote>...</blockquote>

Attribute(s): cite, class, dir, id, style, title
Description: encloses the content of a webpage

Tag:

Code:

<body>...</body>

Attribute(s): background, bgcolor, class, dir, id, onlcik, ondblclick, onmouseout, onmouseover, onload,style, title
Description: encloses the content of a webpage

Tag:

Code:

<br>...</br>

Attribute(s): (commonly none used) class, id, style, title
Description: inserts line break, causing the following text, images, elements ...etc to display on a new line. usually

Tag:

Code:

<button>...</button>

Attribute(s): name, value, type, class, dir, disable, id, onclick, ondblclick, onload, onmouseout, onmouseover, style, title
Description: adds a button control to a form

Tag:

Code:

<center>...</center>

Attribute(s): not specified
Description: centers content found in between this code.

Tag:

Code:

<div>...</div>

Attribute(s): name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title
Description: encloses a section of content into its own layer. you can use attributes such as style to affect only the enclosed section, without affecting the rest of the page.

Tag:

Code:

<em>...</em>

Attribute(s): (commonly none used) class, dir, id, style, title
Description: for a special emphasis on text, most browsers will display this tag in italics.

Tag:

Code:

<head>...</head>

Attribute(s): not specified
Description: header information that describes the document, such as title. content found here will not be displayed when page is shown in a browser.

Tag:

Code:

<h1>...</h1> (1 = biggest 6 = smallest)

Attribute(s): class, dir, id, style, title
Description: Called headline tags that are used to encase different heading types. there are 6 types with <h1> being most prominent to <h6> being less prominent

Tag:

Code:

<hr>...</hr>

Attribute(s): class, dir, id, style, title
Description: creates a horizontal line, also referred to as a horizontal rule, commonly used as a divider for content

Tag:

Code:

<html>...</html>

Attribute(s): Not Specified
Description: encloses and executes all HTML tags in a document.

Tag:

Code:

<i>...</i>

Attribute(s): class, dir, id, style, title
Description: changes text to appear italicized.

Tag:

Code:

<img>...</img>

Attribute(s): height, hspace, name, src, vspace, width, alt, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, title, usemap
Description: displays an image on a page.

Tag:

Code:

<li>...</li>

Attribute(s): (commonly none used) class, dir, id, style, title
Description: changes text to appear italicized.

Tag:

Code:

<meta>...</meta>

Attribute(s): name, content, http-equiv, scheme, lang, dir
Description: defines metadata property for a document. you may use this tag more than once, but only within the <head> and </head> tags.

Tag:

Code:

<object>...</object>

Attribute(s): coebase, codetype, data, height, width, type, archive, standby, vspace, hspace, class, dir, id, onclick, ondblclick, onload, onselect, onmouseout, onmouseover, style, title, usemap
Description: place objects of a document in between these tags, like files, interactive programs, and other HTML documents.

Tag:

Code:

<ol>...</ol>

Attribute(s): class, dir, id, style, title
Description: used for ordered lists that will appear in numerical order. each item is defined using <li> and </li> tags within the <ol> tags.

Tag:

Code:

<p>...</p>

Attribute(s): align, class, dir, id, style, title
Description: creates a paragraph of text. instead of using breaks, this paragraph tag automativally sets space above and below.

Tag:

Code:

<s>...</s>

Attribute(s): Not Specified
Description: adds a strike(line) through text found in between this tag.

Tag:

Code:

<strong>...</strong>

Attribute(s): class, dir, disable, id, style, title
Description: adds emphasis to text. Like the <em> tag, this will often display bold text.

Tag:

Code:

<style>...</style>

Attribute(s): type, media, dir, title
Description: determines stylesheet codes in the head of a document.

Tag:

Code:

<sub>...</sub>

Attribute(s): class, dir, id, style, title
Description: text is subscripted.

Tag:

Code:

<sup>...</sup>

Attribute(s): class, dir, id, style, title
Description: text is superscripted.

Tag:

Code:

<table>...</table>

Attribute(s): border, cellpadding, cellspacing, frame, summary, rules, width, align, bgcolor, class, dir, id, style, title
Description: organizes information into a table of rows and columns.

Tag:

Code:

<td>...</td>

Attribute(s): headers, scope, abbr, axis, rowspan, colspan, bgclor, height, width, align, class, dir, style, title, valign
Description: information inside a table cell - rows, text, and/or other content.

Tag:

Code:

<textarea>...</textarea>

Attribute(s): name, rows, cols, class, dir, disabled, id, readonly, style, title
Description: Creates an area on the page to show text or write text in

Tag:

Code:

<title>...</title>

Attribute(s): dir
Description: type a title in between this tag to appear on a browser window's title bar.

Tag:

Code:

<tr>...</tr>

Attribute(s): align, class, dir, id, style, title, valign
Description: adds a row to a cell in a table.

Tag:

Code:

<u>...</u>

Attribute(s): Not Specified
Description: adds an underline to text.

Tag:

Code:

<ul>...</ul>

Attribute(s): class, dir, id, style, title
Description: creates a list of unordered bullets, meaning the list will not be numbered or lettered in an orderly manner - instead, symbols such as a dot, circle or square will appear.

More to come soon!

March 12th, 2008, 1:42 PM	#1 (permalink)
Roxy URB4N 5K1LLZ Super #1 Joined in Sep 2005 Lives in Orlando, FL Hosted on SH63 2,660 posts Gave thanks: 81 Thanked 128 times	[Article] HTML Cheat-Sheet For those who aren't quite sure what code to write out or for those who just need a reminder on a code/tag they forgot. All of your HTML coding needs start here! Basic HTML Page Structure/"Skeleton" Code: <html> <head> <title>site's title goes here</title> </head> <body> Site's Content would go here... </body> </html> Commonly used HTML Tags (in alphabetical order) Tag: Code: <a href="#">...</a> Attribute(s): name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title Description: this tag is used for anchors, but most commonly used to link text and images to other pages or websites with the href="URL" attribute. Tag: Code: <b>...</b> Attribute(s): (commonly none used) class, dir, id, style, title Description: makes text appear larger than normal. this tag still works, however it is uncommonly used. stylesheets are a better alternative. Tag: Code: <blockquote>...</blockquote> Attribute(s): cite, class, dir, id, style, title Description: encloses the content of a webpage Tag: Code: <body>...</body> Attribute(s): background, bgcolor, class, dir, id, onlcik, ondblclick, onmouseout, onmouseover, onload,style, title Description: encloses the content of a webpage Tag: Code: <br>...</br> Attribute(s): (commonly none used) class, id, style, title Description: inserts line break, causing the following text, images, elements ...etc to display on a new line. usually Tag: Code: <button>...</button> Attribute(s): name, value, type, class, dir, disable, id, onclick, ondblclick, onload, onmouseout, onmouseover, style, title Description: adds a button control to a form Tag: Code: <center>...</center> Attribute(s): not specified Description: centers content found in between this code. Tag: Code: <div>...</div> Attribute(s): name, href, shape, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, target, title Description: encloses a section of content into its own layer. you can use attributes such as style to affect only the enclosed section, without affecting the rest of the page. Tag: Code: <em>...</em> Attribute(s): (commonly none used) class, dir, id, style, title Description: for a special emphasis on text, most browsers will display this tag in italics. Tag: Code: <head>...</head> Attribute(s): not specified Description: header information that describes the document, such as title. content found here will not be displayed when page is shown in a browser. Tag: Code: <h1>...</h1> (1 = biggest 6 = smallest) Attribute(s): class, dir, id, style, title Description: Called headline tags that are used to encase different heading types. there are 6 types with <h1> being most prominent to <h6> being less prominent Tag: Code: <hr>...</hr> Attribute(s): class, dir, id, style, title Description: creates a horizontal line, also referred to as a horizontal rule, commonly used as a divider for content Tag: Code: <html>...</html> Attribute(s): Not Specified Description: encloses and executes all HTML tags in a document. Tag: Code: <i>...</i> Attribute(s): class, dir, id, style, title Description: changes text to appear italicized. Tag: Code: <img>...</img> Attribute(s): height, hspace, name, src, vspace, width, alt, class, dir, id, onclick, ondblclick, onmouseout, onmouseover, style, title, usemap Description: displays an image on a page. Tag: Code: <li>...</li> Attribute(s): (commonly none used) class, dir, id, style, title Description: changes text to appear italicized. Tag: Code: <meta>...</meta> Attribute(s): name, content, http-equiv, scheme, lang, dir Description: defines metadata property for a document. you may use this tag more than once, but only within the <head> and </head> tags. Tag: Code: <object>...</object> Attribute(s): coebase, codetype, data, height, width, type, archive, standby, vspace, hspace, class, dir, id, onclick, ondblclick, onload, onselect, onmouseout, onmouseover, style, title, usemap Description: place objects of a document in between these tags, like files, interactive programs, and other HTML documents. Tag: Code: <ol>...</ol> Attribute(s): class, dir, id, style, title Description: used for ordered lists that will appear in numerical order. each item is defined using <li> and </li> tags within the <ol> tags. Tag: Code: <p>...</p> Attribute(s): align, class, dir, id, style, title Description: creates a paragraph of text. instead of using breaks, this paragraph tag automativally sets space above and below. Tag: Code: <s>...</s> Attribute(s): Not Specified Description: adds a strike(line) through text found in between this tag. Tag: Code: <strong>...</strong> Attribute(s): class, dir, disable, id, style, title Description: adds emphasis to text. Like the <em> tag, this will often display bold text. Tag: Code: <style>...</style> Attribute(s): type, media, dir, title Description: determines stylesheet codes in the head of a document. Tag: Code: <sub>...</sub> Attribute(s): class, dir, id, style, title Description: text is subscripted. Tag: Code: <sup>...</sup> Attribute(s): class, dir, id, style, title Description: text is superscripted. Tag: Code: <table>...</table> Attribute(s): border, cellpadding, cellspacing, frame, summary, rules, width, align, bgcolor, class, dir, id, style, title Description: organizes information into a table of rows and columns. Tag: Code: <td>...</td> Attribute(s): headers, scope, abbr, axis, rowspan, colspan, bgclor, height, width, align, class, dir, style, title, valign Description: information inside a table cell - rows, text, and/or other content. Tag: Code: <textarea>...</textarea> Attribute(s): name, rows, cols, class, dir, disabled, id, readonly, style, title Description: Creates an area on the page to show text or write text in Tag: Code: <title>...</title> Attribute(s): dir Description: type a title in between this tag to appear on a browser window's title bar. Tag: Code: <tr>...</tr> Attribute(s): align, class, dir, id, style, title, valign Description: adds a row to a cell in a table. Tag: Code: <u>...</u> Attribute(s): Not Specified Description: adds an underline to text. Tag: Code: <ul>...</ul> Attribute(s): class, dir, id, style, title Description: creates a list of unordered bullets, meaning the list will not be numbered or lettered in an orderly manner - instead, symbols such as a dot, circle or square will appear. More to come soon! __________________ Roxanne Urban Roxy -Personal Blog SH63 - the best darn shared server!