===== HTML Cheat Sheet ===== This is a summarized form of the [[http://www.w3schools.com/html/default.asp | HTML Tutorial]]. For reference this is the [[http://www.w3.org/TR/REC-html40 | HTML Specification]] . ==== What is HTML ==== * HTML stands for Hyper Text Markup Language. * An HTML file is a text file containing small markup tags telling a web browser how to display the page. It must end with **htm** or **html**. * A simple HTML web page




    Title of page  
   This is my first webpage.

* HTML 4 comes in three versions : * Strict which contains no deprecated elements or frames

* Transitional which includes deprecated elements * Frameset which includes deprecated elements and frames ==== HTML Components ==== * HTML documents are text files consisting of HTML elements. * HTML elements are defined using HTML tags. [[http://www.w3schools.com/tags/ref_byfunc.asp | HTML Tag Reference]]. * HTML tags contain the element name surrounded by angle brackets (** < > **). * HTML tags normally come in pairs - the **start tag**(

) and the **end tag** (

). * The text between the start tag and the end tag is the element content. * HTML tags may contain attributes with values specified in the start tag e.g.

. * 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. * [[http://www.w3schools.com/tags/ref_standardattributes.asp | Standard attributes]] valid for most elements include: class, id, title, style, lang. ==== Formatting Tags ==== * Basic tags *
...
defines a paragraph. *
is a line break (a self-closed tag). *
is a horizontal line. * is a comment. * Physical formatting tags *

to

defines headers level 1 through 6. * - **bold**, - //italic//, - //emphasized//, ,, _{, ^{.
* is for deleted text, for __inserted text__.
* ... contains pre-formatted text.
*
is used for a long quote, for a short quote.
* Logical Formatting Tags
* < code>, , , , are computer-related text tags.
* UN
* WWW
* is for addresses
* is for citations, for definitions.

==== Lists & Tables ====
* - Unordered list, can have type disc, circle, square.
* - Ordered list, can have type A, a, I, i.
*
- Definition list
*

My Table
header 1 header 2
row 1-cell 1 row 1-cell 2

* A table with border 0 can be used to format the layout of a page.
* A table can also be in the form: , but all three must be specified and contain at least one row.
* To set attributes of columns in a table, a colgroup with column entries can be used e.g.
...

==== Forms ====
* Forms are areas that contain form elements used to allow the user to enter and submit information e.g.

* Valid input types include: text, radio/checkbox (checked="checked"), button (also - another button

==== Other Tags ====
* <**a href**="url/#anchor" target="_top/_blank/framename"> - a link. Always add the trailing slash for a folder to prevent an extra request.
* <**a href**="mailto:a@b?subject="> - E-mail link
* <**a name**=""> - an anchor (webpage bookmark)
*<**img** border=0 src=url width=0 height=0 alt="alt text"> - an image. Align can be set to bottom/top/middle/left/right.
* <**frameset** cols/rows="25%,50%,25%"> - a vertical or horizontal set or frames.
* <**frame** src="frame_a.htm"> - a single frame
* <**noframes**> - no-frames alternative page, internal frame

* An image map : <code html>
<img src="planets.gif" usemap="#planetmap">
<map id="planetmap" name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm">
<area shape="circle" coords="90,58,3" href="merc.htm">
</map></code>

==== Fonts, Colors & Backgrounds ====
* A body tag can contain bgcolor/text/background attributes.
* All above attributes are deprecated in HTML 4, style sheets should be used instead.
* Colors are defined as hex values, rgb values or by name e.g. #000000=rgb(0,0,0)=black, #FF0000=rgb(255,0,0)=red.
* 16 valid colour names are guaranteed valid: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
* 140 colour names are universally supported - [[http://www.w3schools.com/html/html_colornames.asp |colour name reference]], [[http://halflife.ukrpack.net/csfiles/help/colors.shtml | chart]].
* The [[ http://html-color-codes.com/ | 216 cross-browser color palette]] was created to ensure that all 256-color monitors would display the colors correctly. It is now obsolete.
* The <font> tag is deprecated, style-sheets or the style attribute should be used instead e.g.<code html> <p style="font-family:verdana;font-size:80%;color:green"></code>

==== Character Entities ====
* A character entity represents a single character. [[http://www.w3schools.com/tags/ref_entities.asp | Character entities]] [[http://www.w3schools.com/tags/ref_symbols.asp | Symbol Entities]].
* 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), " , ' .
* 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://www.w3schools.com/html/html_urlencode.asp | hexadecimal format]] e.g. %20.

==== 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), meta, title, style, and script.
* Example style declaration in head <code html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head> </code>
* Examples of the meta tag <code html>
<meta name="keywords" content="HTML, DHTM" />
<meta name="description" content="Free tutorials" />
<meta name="revised" content="My Name, 6/10/99" />
<meta http-equiv="refresh" content="5" />
</code>

==== Advanced HTML ====

* <div> is used to group elements or divide a page into sections. <span> is used for selecting a part of an element. Both can be used for formatting purposes.
* A simple script in a webpage <code html>
<body>
<script type="text/javascript">

</script>
<noscript>Javascript not supported</noscript>
</body> </code>
* 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, onmousemove, onmouseup, onmouseover, onmouseup

==== 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="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>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>
* Transitional - Presentational attributes allowed but no frames <code html><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>
* Frameset - Allows presentational attributes and frames <code html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></code>}}