DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

===== 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
<code html>
<!DOCTYPE ...>
<html>
  <head> <title> Title of page </title> </head>
  <body background=url> This is my first webpage. </body>
</html>
</code>
  * HTML 4 comes in three versions :
    * Strict which contains no deprecated elements or frames <code html>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"></code>
    * Transitional which includes deprecated elements <code html> <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"></code>
    * Frameset which includes deprecated elements and frames <code html><!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"></code>

==== HTML Components ====
  * HTML documents are text files consisting of HTML elements.
  * HTML elements are defined using HTML tags.
  * HTML tags contain the element name surrounded by angle brackets (** < > **).
  * HTML tags normally come in pairs - the **start tag**(<p>) and the **end tag** (</p>).
  * 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. <h1 align="center">.
  * 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.
  * Standard attributes valid for most elements include: class, id, title, style, lang.

==== Formatting Tags ====
  * Basic tags
    * <p> ... </p> defines a paragraph.
    * <br /> is a line break (a self-closed tag).
    * <hr /> is a horizontal line.
    * <!–– ...  ––> is a comment.
  * Physical formatting tags
    * <h1> to <h6> defines headers level 1 through 6.
    * <b> - **bold**, <i> - //italic//, <em> - //emphasized//, <big>,<small>, <sub>, <sup> .
    * <del > is for <del>deleted text</del>, <ins> for __inserted text__.
    * <pre> ... </pre> contains pre-formatted text.
    * <blockquote></blockquote> is used for a long quote, <q></q> for a short quote.
  * Logical Formatting Tags
    * < code>, <tt>, <kbd>, <samp>, <var> are computer-related text tags.
    * <abbr title="United Nations">UN</abbr>
    * <acronym title="World Wide Web">WWW</acronym>
    * <address> is for addresses
    * <cite> is for citations, <dfn> for definitions.

==== Lists & Tables ====
  * <ul><li></li></ul> - Unordered list, can have type disc, circle, square.
  * <ol><li></li></ol> - Ordered list, can have type A, a, I, i.
  * <dl><dt></dt><dd></dd></dl> - Definition list
  * <code html>
     <table border="1">
     <tr><th>header 1</th> <th>header 2</th></tr>
     <tr><td>row 1-cell 1</td> <td>row 1-cell 2</td></tr>
     </table> </code>
  * A table with border 0 can be used to format the layout of a page.

==== Forms ====
  * Forms are areas that contain form elements used to allow the user to enter and submit information e.g.
<code html>
<form name="input" action="cgi.php" method="get">
  <input type="text" name="name" value="">
  <input type="radio" name="sex" value="male">
</form>
</code>
  * Valid input types include: text, radio/checkbox (checked="checked"), button (also <button>), submit (for the submit button).
  * For a drop-down selection : <code html>
<select name="cars">
 <optgroup label="German">
  <option value="audi" selected="selected">Audi</option>
 </optgroup>
 <option value="saab">Saab</option>
</select></code>
  * <textarea rows="10" cols="30"> </textarea> for a text area.
  * To define a field set with a caption
<code html><fieldset>
  <legend>Caption</legend>
 <form></form>
</fieldset> </code>
  * <button type="button">Click Me</button> - another button

==== Other Tags ====
  * <**a href**="url/#anchor" target="_top/_blank/framename"></a> - a link. Always add the trailing slash for a folder to prevent an extra request.
  * <**a href**="mailto:a@b?subject="></a> - E-mail link
  * <**a name**=""></a> - 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**> <iframe> - 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 | All named entities]].
  * It consists of an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;) (e.g. &#60;).
  * Common character entities include: &gt; , &lt; , &nbsp; (space), &quot; , &apos; .
  * Other common symbols include: cent ¢, pound £, yen ¥, euro €, copy ©, times ×, div ÷, reg ®, sect §

==== The HEAD Element ====
  * 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> and <span> are used to group elements to format them with a style. <div> also divides a page into sections.
  * 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.

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International

DokuWiki

Site Tools

Page Tools