This page summarizes hypertext markup language (HTML). XHTML (extensible HTML) is the reformulation of HTML 4.0 as an application of XML (Extensible Markup Language).
BASIC RULES
- Documents must be well-formed or structured (nested boxes in a box).
- Stylish tags such as <font> are deprecated.
- Element and attribute names must be in lower case: casesensitive.
- For non-empty elements, end tags or ending with /> are required (e.g., p; img; br; hr).
- Attribute values must always be quoted.
- Attribute minimization is not supported (e.g., style="noshade").
- Script and style elements (e.g., script type="text/javascript").
- Documents must use the "id" attribute instead of "name" when defining fragment identifiers.
DOCUMENT MODULES
<html> <!-- root element -->
<head> <!-- head element -->
<title> title element </title>
<meta ... />
...
</head>
<body> <!-- body element -->
...
</body>
</html>
META INFORMATION MODULES
- <DOCTYPE (document type definition) />
- <meta (meta element); content (content attribute) />
- name (name attribute-old fashion)
- http-equiv (HTTP header equivalent attribute)
- <meta http-equiv="Content-Type" content="text/html; charset=..." />
- <meta http-equiv="refresh" content="7;url=http://..." />
- <meta property="author" content="..." />
- <meta property="description" content="..."
- <meta property="keywords" content="..." />
- <meta property="revised" content="..." />
- <link rel="stylesheet" type="text/css" href="http://..." />
STYLE SHEETS MODULES
- style (style element)
- type (type attribute)
- style type="text/css"
<style type="text/css">
body {font: 10pt Arial; background-color:white; color:black;}
p {font: 10pt Arial; color:black; text-align:left;}
li {font:8pt 'Copperplate Gothic Light'; text-indent:0px;}
a:link, a.popup:link {text-decoration:none; color:#242424;}
a:visited, a.popup:visited {text-decoration:none; color:#242424;}
a:hover, a.popup:hover {text-decoration:none; color:#9e032a;}
a:active {text-decoration:none; color:maroon;}
.area_text {font: 9pt Arial; color:#242424; line-height:150%;}
#address {font: 8pt Arial; font-weight:normal;}
</style>
<script type="text/javascript">
function newWindow(url) {
var address = url
if (address != "") {
window.open(address);
}
}
</script>
STRUCTURE MODULES
- <div> (div element)
- <p> (paragraph element)
- <br /> (break element--inline element)
- <hr> (horizontal rule element)
- <h1> <h2> <h3> <h4> <h5> <h6> (heading element)
- pre
- blockcode; blockquote
- section; separator;
- address (address element)
<div class="">
<hr />
<p style="">
...
</p>
...
</div>
TEXT MODULES
- <span> (span element--inline element)
- strong (strong element replacing "b")
- em (emphasis element replacing "i")
- kbd
- var, samp, l
- abbr, dfn, code
- cite and quote
- sub and super
HYPERTEXT MODULES
- <a> (anchor element)
- <a href="" target="_blank" method="get" id="" >
- href (hypertext reference attribute)
- class="" (class attribute defined by .xxx {})
- id="" (id attribute defined by #xxx {})
- script
<a href="http://...">Hyperlink</a>
<a id="...">anchor</a>
LIST MODULES
- <ol> (ordered list element)
- <ul> (unordered list element)
- <li> (list items)
- <dl> <dt> <dd> <nl> <label>
<ul>
<li>list item1</li>
<li>list item2</li>
<li>...</li>
<li type="a">...</li>
<li type="i">...</li>
</ul>
TABEL MODULES
- <table> (table element)
- <th> (table header element)
- <tr> (table row element)
- <td> (table data element)
- border="" (border attribute)
- cellpadding="" (cellpadding attribute)
- cellspacing="" (cellspacing attribute)
- width="" (width attribute)
- colspan="" (column span attribute)
- rowspan="" (row span attribute)
- thead (table head element)
- tbody (table body element)
- tfoot (table footer element)
- <caption style="caption-side:top; font-weight:bold;">Examples</caption>
- summary="" (summary attribute)
<table border="1" cellpadding="0" cellspacing="0" width="200" >
<tr style="background-color:maroon;">
<th>r1c1</th>
<th>r1c2</th>
<th>r1c3</th>
</tr>
<tr style="background-color:maroon;">
<td>r2c1</td>
<td colspan="2">r2c2 and r2c3</td>
</tr>
<tr style="background-color:maroon;">
<td>r3c1</td>
<td rowspan="2">r3c2 and r4c2</td>
<td>r3c3</td>
</tr>
<tr style="background-color:maroon;">
<td>r4c1</td>
<td>r4c3</td>
</tr>
</table>
|
Examples
| r1c1 |
r1c2 |
r1c3 |
| r2c1 |
r2c2, r2c3 |
| r3c1 |
r3c2, r4c2 |
r3c3 |
| r4c1 |
r4c3 |
| r1c1 |
r1c2 |
r1c3 |
| border="1" cellpadding="5" cellspacing="0" |
| r1c1 |
r1c2 |
r1c3 |
| border="1" cellpadding="0" cellspacing="5" |
| r1c1 |
r1c2 |
r1c3 |
| border="0" cellpadding="0" cellspacing="5" |
|
FORM MODULES
- <form>...</form>
- <input type="text" id="keyword" value="tiger" style="font: 8pt Arial;" />
- <label>...</label>
- <select>...</select>
- <option>...</option>
- <textarea>...</textarea>
- type="button" | text file hidden image password reset submit
<form name="software" action="../cgi-bin/activate.php" method="post">
<select name="task">
<option value="SAS">SAS</option>
<option value="STATA">STATA</option>
<option value="Maple">Maple</option>
</select>
<input type="text" name="word" value="" size="10" maxlength="30" />
<input type="button" name="word" value="Go" />
<input type="radio" name="gender" value="male" />male
<input type="hidden" name="mode" value="write" />
<textarea name="description" class="area_text" cols="80" rows="15" />
<input type="submit" value="Activate" />
</form>
IMAGE MODULES
- <img src="tiger.gif" alt="tiger icon" />(image element)
- src="" (source attribute)
- width="" (width attribute)
- height="" (height attribute)
- alt="" (alternate attribute)
<img src="../images/mouse.gif" width="20" alt="Mouse Image" />
APPLET MODULES
<applet code="Heckit.class" codebase="..." archive="...jar" width="500" >
<param name="maxwidth" value="...">
<param name="offset" value="...">
<param name="image" value="../images/mouse.gif">
</applet>
ENTITY CHARACTERS
[
List]
- & (&), ∞ (∞), ⊕ (⊕), ⋅ (⋅), √ (√), ∴ (∴)
- σ (σ), μ (μ), α (α), β (β), δ (δ), ρ (ρ), γ (γ)
- Σ (Σ), λ (λ), &chi (χ), &kappa (κ), ω (ω), π (π), θ (θ), τ (τ)
- © (©), ™ (™), ® (®), † (†), ‡ (‡)
- ≈ (≈), ≅ (≅), ≡ (≡), ≠ (≠), × (×), ÷ (÷), ± (±)
- > (>), &ge (≥), < (<), &le (≤), ∧ (∧), ∨ (∨)
- ∃ (∃), ∀ (∀), ∈ (∈), ∋ (∋), § (§), ⊥ (⊥), ∇ (∇), ∝ (∝)
- ∩ (∩), ∪ (∪), ⊂ (⊂), ⊃ (⊃), ⊆ (sube;), ⊇ (supe;)
- « («), » (»), “ (“), " ("), ” (”), ″ (″)
- ‹ (‹), › (›), „ („), ‹ (‹), › (›), ´ (´)
- ↓ (↓), ⇓ (⇓), ↑ (↑), ⇑ (⇑), ↔ (↔), ⇔ (⇔)
- ¦ (¦), • (•), ( ), … (…), ¶ (¶), ˜ (˜), º (º); ° (°)
- ♣ (♣), ♠ (&emp;spades;), ↵ (↵), ♦ (♦), ◊ (◊), • (•)
