notes:html_cheat_sheet

HTML Cheat Sheet

This is a summarized form of the HTML Tutorial.

For reference this is the 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

<!DOCTYPE ...>
<html>
  <head> <title> Title of page </title> </head>
  <body background=url> This is my first webpage. </body>
</html>

HTML 4 comes in three versions :

Strict which contains no deprecated elements or frames

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Transitional which includes deprecated elements

 <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Frameset which includes deprecated elements and frames

<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

HTML Components

HTML documents are text files consisting of HTML elements.
HTML elements are defined using HTML tags. HTML Tag Reference.
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 ~~deleted text~~, <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

     <table border="1">
     <caption>My Table</caption>
     <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>

A table with border 0 can be used to format the layout of a page.
A table can also be in the form: <thead> <tfoot> <tbody> , 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.

<table border="1">
<colgroup span="2">
<col width="20"></col>
<col width="50"></col>
</colgroup> ... </table>

Forms

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

<form name="input" action="cgi.php" method="get">
  <input type="text" name="name" value="">
  <input type="radio" name="sex" value="male">
</form>

Valid input types include: text, radio/checkbox (checked=“checked”), button (also <button>), submit (for the submit button).

For a drop-down selection :

<select name="cars">
 <optgroup label="German">
  <option value="audi" selected="selected">Audi</option>
 </optgroup>
 <option value="saab">Saab</option>
</select>

<textarea rows=“10” cols=“30”> </textarea> for a text area.
To define a field set with a caption

<fieldset>
  <legend>Caption</legend>
 <form></form>
</fieldset>

<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 :

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

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 - colour name reference, chart.
The 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.
```
 <p style="font-family:verdana;font-size:80%;color:green">
```

Character Entities

A character entity represents a single character. Character entities 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 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

<head>
  <style type="text/css">
    h1 {color: red}
    h3 {color: blue}
  </style>
</head>

Examples of the meta tag

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

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

<body> 
  <script type="text/javascript">
    <!-- //to prevent display in older browsers
    document.write("Hello World!")
    //-->
  </script>
  <noscript>Javascript not supported</noscript>
 </body>

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

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional - Presentational attributes allowed but no frames

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset - Allows presentational attributes and frames

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Table of Contents