Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
notes:html_cheat_sheet [2008/08/14 04:35] smthng |
notes:html_cheat_sheet [2008/08/15 02:59] (current) smthng |
||
|---|---|---|---|
| Line 31: | Line 31: | ||
| ==== HTML Components ==== | ==== HTML Components ==== | ||
| * HTML documents are text files consisting of HTML elements. | * HTML documents are text files consisting of HTML elements. | ||
| - | * HTML elements are defined using HTML tags. | + | * HTML elements are defined using HTML tags. [[http:// |
| * HTML tags contain the element name surrounded by angle brackets (** < > **). | * HTML tags contain the element name surrounded by angle brackets (** < > **). | ||
| * HTML tags normally come in pairs - the **start tag**(< | * HTML tags normally come in pairs - the **start tag**(< | ||
| Line 38: | Line 38: | ||
| * Attribute values should always be either single or double-quoted. | * Attribute values should always be either single or double-quoted. | ||
| * Element and attribute names are not sensitive but lowercase names are recommended and required in XHTML. | * Element and attribute names are not sensitive but lowercase names are recommended and required in XHTML. | ||
| - | * Standard attributes valid for most elements include: class, id, title, style, lang. | + | * [[http:// |
| ==== Formatting Tags ==== | ==== Formatting Tags ==== | ||
| Line 65: | Line 65: | ||
| * <code html> | * <code html> | ||
| < | < | ||
| + | < | ||
| < | < | ||
| < | < | ||
| </ | </ | ||
| * A table with border 0 can be used to format the layout of a page. | * A table with border 0 can be used to format the layout of a page. | ||
| + | * A table can also be in the form: < | ||
| + | * To set attributes of columns in a table, a colgroup with column entries can be used e.g. <code html> | ||
| + | <table border=" | ||
| + | < | ||
| + | <col width=" | ||
| + | <col width=" | ||
| + | </ | ||
| + | </ | ||
| ==== Forms ==== | ==== Forms ==== | ||
| Line 120: | Line 129: | ||
| ==== Character Entities ==== | ==== Character Entities ==== | ||
| - | * A character entity represents a single character. [[http:// | + | * A character entity represents a single character. [[http:// |
| * It consists of an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;) (e.g. <). | * It consists of an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;) (e.g. <). | ||
| * Common character entities include: > , < , (space), " , ' . | * Common character entities include: > , < , (space), " , ' . | ||
| * Other common symbols include: cent ¢, pound £, yen ¥, euro €, copy ©, times ×, div ÷, reg ®, sect § | * Other common symbols include: cent ¢, pound £, yen ¥, euro €, copy ©, times ×, div ÷, reg ®, sect § | ||
| + | * Non-standard letters and other characters can be displayed url-encoded using [[http:// | ||
| - | ==== Advanced | + | ==== HTML Head ==== |
| + | * The head element of a page is not displayed. It contains information about the document. | ||
| + | * It may only contain the following tags: base (base url for links), link (external resources e.g.style-sheets), | ||
| * Example style declaration in head <code html> | * Example style declaration in head <code html> | ||
| < | < | ||
| Line 133: | Line 145: | ||
| </ | </ | ||
| </ | </ | ||
| - | * <div> and < | ||
| - | * The head element of a page is not displayed. It may only contain the following tags: base (base url for links), link (external resources e.g.style-sheets), | ||
| * Examples of the meta tag <code html> | * Examples of the meta tag <code html> | ||
| <meta name=" | <meta name=" | ||
| Line 141: | Line 151: | ||
| <meta http-equiv=" | <meta http-equiv=" | ||
| </ | </ | ||
| + | |||
| + | ==== Advanced HTML ==== | ||
| + | |||
| + | * <div> is used to group elements or divide a page into sections. < | ||
| * A simple script in a webpage <code html> | * A simple script in a webpage <code html> | ||
| < | < | ||
| Line 151: | Line 165: | ||
| </ | </ | ||
| * An object element with child param elements can also be used to embed content. | * An object element with child param elements can also be used to embed content. | ||
| + | * accesskey (character) and tabindex (integer) attributes can be used to make a page keyboard-friendly. | ||
| + | |||
| + | * Events allow scripts to be registered for certain user actions. There are four types of events : | ||
| + | * window events are only valid in a body or frameset element: onload, onunload. | ||
| + | * form element events: onchange, onselect, onreset, onsubmit, onblur, onfocus | ||
| + | * keyboard events: onkeydown, onkeypress, onkeyup | ||
| + | * mouse events: onclick, ondblclick, onmousedown, | ||
| + | |||
| + | ==== XHTML ==== | ||
| + | * XHTML is a stricter and cleaner replacement for HTML defined as an XML format. | ||
| + | * XHTML requires elements to be closed, properly nested and lowercase. | ||
| + | * Documents must have a DOCTYPE declaration and only a single root element. They must have a head with a title and a body. | ||
| + | * Attributes must be lowercase with quoted values and must have values (e.g. checked=" | ||
| + | * id replaces the name attribute, xml:lang replaces lang but both should be used for compatibility. | ||
| + | * There are three XHTML variations | ||
| + | * Strict - No presentational attributes allowed <code html> | ||
| + | < | ||
| + | PUBLIC " | ||
| + | " | ||
| + | * Transitional - Presentational attributes allowed but no frames <code html>< | ||
| + | PUBLIC " | ||
| + | " | ||
| + | * Frameset - Allows presentational attributes and frames <code html> | ||
| + | < | ||
| + | PUBLIC " | ||
| + | " | ||
