Htmlcard Letter

HTML Quick Reference Guide Block-oriented elements Images
Spinning the Web The WorldWideWeb Handbook <p>: : : </p> Paragraphs of regular text
<address>: : : </address> Address information
Andrew Ford Peter Flynn External images are specified with the
<blockquote>: : : </blockquote> Block quotations (may contain <a> element as hypertext
links. Inline
images

1–85032–141–8 1–85032–205–8 paragraphs) are specified as <img src="url " align="..." alt="..." ismap >
<pre>: : : </pre> Preformatted text (fixed-width The value of align can be top, middle or bottom. The alt attribute provides
characters) text for non-graphical users and is strongly recommended. An image map (clickable
• Element names are not case sensitive image) is an <img> with ismap inside an <a> element pointing to a server map file:
<hr> Horizontal rule
• Documents start with a <!doctype> statement, followed by a header and text <a href="http://www.foo.bar/cgi-bin/imagemap/mypic">
body enclosed in <html>: : : </html> Lists <img src="http://www.foo.bar/mypic.gif"
• The header is enclosed in <head>: : : </head> <ol>: : : </ol> Ordered lists, items numbered alt="Image map" ismap> </a>
• The text body is enclosed in <body>: : : </body> consecutively
• Comments are written as  Unordered lists, items bulleted
<ul>: : : </ul>
Menu lists
<menu>: : : </menu>
Elements in dark gray are not in HTML 2.0 but are supported by browsers:
ele- Directory lists
<dir>: : : </dir>
ments in light

gray are obsolescent. Optional attributes are given in square List items within ordered, unordered,
<li>: : : </li>
menu, and directory lists Forms
brackets . The full DTD can be found at http://www.w3.org/hypertext/
WWW/MarkUp/MarkUp.html <dl>: : : </dl> Definition lists
<dt>: : : </dt> Definition term in a definition list
<dd>: : : </dd> Definition discussion in a definition list, <form method="..." action="url ">: : : </form>
may contain other block-oriented The URL should be a script or may use mailto: The method is GET or POST,
Sample document elements depending on how you want the data returned. Within a form, input fields are
The <ol>, <ul>, <menu>, <dir>, and <dl> elements may have a compact defined with:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> attribute. • for multiline text input (surrounds prompting text):
<html> <textarea name="..." rows="n" cols="n">: : : </textarea>
<head>  Inline elements • for single-line input: <input name="..." type="..." ... >
<title>Document title</title> The type can be one of text, checkbox, radio, hidden, password, reset,
<link rev="made" href="mailto:info@itpuk.co.uk"> Logical markup or submit. Other attributes are align, checked, size, maxlength, src,
</head> <cite>: : : </cite> Citations and value. All <input> fields of a radio or checkbox group must have the
<body> same name.
<code>: : : </code> Computer code
<h1>Top-level heading</h1> <dfn>: : : </dfn> Defining instance (see HTML3) • for menus: <select name="..." multiple >: : : </select>
<p>First paragraph of text.</p>
<em>: : : </em> Emphasis Options are given with <option value="..." >: : : </option> within
<ul>  <kbd>: : : </kbd> Keyboard input the <select>: : : </select>. Individual options can have an attribute of
<li>First list item</li> <samp>: : : </samp> Literal characters selected or disabled. If no value is given, the element content is used.
<li>Second list item, with a hypertext <strike>: : : </strike> strike out (see HTML3)
<a href="info.html">link<a> to another file.</li> <strong>: : : </strong> Strong emphasis
</ul> <h2>Second-level heading</h2> <var>: : : </var> Variable name
<p>Another paragraph, <img alt="Picture of me" Example form
align="bottom" src="mypic.gif"> Visual markup
with an illustration.</p> <b>: : : </b> Bold type <hr> <form method="GET"
</body> <br> Forced linebreak action="http://www.foo.bar/cgi-bin/script">
</html> <i>: : : </i> Italic type <p>Name: <input name="name" type="text" size="20"><br>
<tt>: : : </tt> Typewriter type Operating system: <select name="opsys"><option>Unix
<u>: : : </u> Underlined <option>VMS<option>Mac<option>DOS<option></select></p>
Header elements Hypertext links <p><textarea name="comments" rows="4" columns="40">
Please write your comments here...</textarea></p>
<a href="url ">: : : </a> Link to another document or resource <p><input type="submit"> <input type="reset"></p>
<title>: : : </title> Document running title (not part of the <a href="url #label ">: : : </a> Link to a specific destination in another </form> <hr>
text), recommended maximum length 64 document
characters <a href="#label ">: : : </a> Link to a specific destination in the
<link ...> Relationships for the document as a same document
whole: attributes rel, rev, href <a name="label ">: : : </a> Labels the surrounded text as a target
<base href="url "> Defines the default structure for any destination
partial (incomplete) URLs in the An <a> element may contain both href and name attributes. Special characters
document
<isindex> Document is a script which handles Uniform Resource Locators (URLs)
searches
<meta ...> Embed meta-information for the server: These specify the location of a resource for a hypertext link:
attributes http-equiv, name,
content http://www.thomson.com:80/ catalog/order.html?searchterm
<nextid n="id "> Editor assigns next identifier to be one of: : : # # # #location < < less-than symbol
generated http:// Internet server directory filename options: > > greater-than symbol
gopher:// hostname or IP name searching means & & ampersand
ftp:// address with URL must be a " " unidirectional double quote
telnet:// optional port. script; using a non-breaking space
Section headings mailto: Email address. location implies - soft hyphen
news: Newsgroup name. target label
<hn>: : : </hn> Section headings, six levels available Note mailto: and news: have no double slash. exists (see <a>).
<h1> to <h6>
ISO Latin-1 characters Logical markup Mathematics

<a id="label "> Use of id replaces name in <math model="..." >: : : </math> Encloses a formula
anchors <box>: : : </box> Surrounds symbols to be treated
<abbrev>: : : </abbrev> Identifies an abbreviation as a whole, optional delim
À À capital A, grave accent ï ı̈ small i, diæresis/umlaut attribute
à à small a, grave accent Ð Ð capital Eth, Icelandic <acronym>: : : </acronym> Identifies an acronym
Á Á capital A, acute accent ð ð small eth, Icelandic <au>: : : </au> Authors’ names <over> and <atop> Separate lined and unlined
á á small a, acute accent Ñ Ñ capital N, tilde <del>: : : </del> Marks text as having been fractions
Â Â capital A, circumflex ñ ñ small n, tilde deleted but kept for reference <above>: : : </above> Identifies numerator
â â small a, circumflex Ò Ò capital O, grave accent
purposes <below>: : : </below> Identifies denominator
Ã Ã capital A, tilde ò ò small o, grave accent <root root="n"> Root, degree specified as n
<dfn>: : : </dfn> Defining instance
ã ã small a, tilde Ó Ó capital O, acute accent
<ins>: : : </ins> Marks new text inserted <array>: : : </array> LATEX-like arrays
Ä Ä capital A, diæresis/umlaut ó ó small o, acute accent
ä ä small a, diæresis/umlaut Ô Ô capital O, circumflex <lang>: : : </lang> Identifies a language other than <arow>: : : </arow> Row within an array
Å Å capital A, ring ô ô small o, circumflex the basic one of the document <item>: : : </item> Item within a row in an array
å å small a, ring Õ Õ capital O, tilde
<person>: : : </person> Personal names To minimize typing, <sub> and <sup> tags can be replaced with the
Æ Æ capital AE ligature õ õ small o, tilde underscore (_) and caret (^) respectively, and <box> tags can be replaced with
æ æ small ae ligature Ö Ö capital O, diæresis/umlaut <q>: : : </q> Encloses quoted speech (adds
{curly braces}, e.g. E=mc^2^
Ç Ç capital C, cedilla ö ö small o, diæresis/umlaut “quotes” automatically)
ç ç small c, cedilla Ø Ø capital O, slash <sub align="...">: : : </sub> Subscripts
È È capital E, grave accent ø ø small o, slash <sup align="...">: : : </sup> Superscripts
è è small e, grave accent Ù Ù capital U, grave accent Tables
É É capital E, acute accent ù ù small u, grave accent
é é small e, acute accent Ú Ú capital U, acute accent
Ê Ê capital E, circumflex ú ú small u, acute accent <table border >: : : </table> Defines a table
ê ê small e, circumflex Û Û capital U, circumflex Visual markup <caption>: : : </caption> Supplies a caption
Ë Ë capital E, diæresis/umlaut û û small u, circumflex <tr>: : : </tr> Encloses a table row
ë ë small e, diæresis/umlaut Ü Ü capital U, diæresis/umlaut
Ì capital I, grave accent ü small u, diæresis/umlaut <th>: : : </th> Encloses a column or row
Ì ü <big>: : : </big> Designates bigger text (see
ì ı̀ small i, grave accent Ý Ý capital Y, acute accent header inside a row
<small>)
Í Í capital I, acute accent ý ý small y, acute accent <td>: : : </td> Encloses table data (a cell value)
í ı́ small i, acute accent Þ Þ capital Thorn, Icelandic <s>: : : </s> Replaces <strike> for
<table border>
Î Î capital I, circumflex þ þ small thorn, Icelandic strikeout text (see also <ins>
<tr><th>Item</thi><th>Quantity</th></tr>
î ı̂ small i, circumflex ß ß small sharp s, German sz and <del>)
Ï capital I, diæresis/umlaut ÿ small y, diæresis/umlaut <tr><th>Population</th></td>384,000</td></tr>
Ï ÿ <small>: : : </small> Designates smaller text (see
<tr><th>Sample</th></td>384</td></tr>
<big>)
<caption>Fig 1. Survey Frame</caption> </table>
<tabstop id="label "> Sets tab stop at current location
The <th> and <td> elements can have align and span attributes.
<tab to="label "> Tabs to the labelled position
HTML3
Figures
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> Additional characters from ISO 8859-1
<figure src="/url">: : : </figure> Encloses a figure
<caption>: : : </caption> Supplies a caption
Header elements <credit>: : : </credit> Supplies a credit
<style notation="...">: : : </style> Encloses stylesheet information

Within figures, <a> elements can have a shape attribute which identifies a
<range from="label " until="label "> Specifies range marked in text
polygon in the image that the user can click on:
with non-breaking space ± ± plus-or-minus sign
¡ ¡ ¡ inv. exclamation mark ² ² 2 superscript two
<spot id="label "> elements 3
¢ ¢ ¢ cent sign ³ ³ superscript three
<figure id="d69" src="http://abc.xyz.org/~pat/house.gif" £ £ £ pound sign ´ ´ ´ acute accent
align="center"> ¤ ¤ ¤ general currency sign µ µ micro sign
¥ ¥ ¥ yen sign ¶ ¶ ¶ pilcrow (paragraph)
<caption align="bottom">My house</caption> |
Structural markup ¦ ¦ | broken (vertical) bar · · middle dot
<p>Picture of my mansion in the hills above § § § section sign ¸ ¸ ¸ cedilla
1
ª
Naples, note the <a href="fire.html" ¨ ¨ ¨ umlaut/dieresis ¹ ¹ superscript one
All structural elements can have class, lang, id, clear and background © © C copyright sign º º º ordinal indicator, male
shape="rect 20,120,50,140">hole in the roof</a> ª ª ordinal indicator, fem » » » angle quotation, right
attributes. Heading and list-oriented elements can have seqnum, dingbat, src, where the lightning struck.</p> « « « angle quotation, left ¼ ¼ 1=4 fraction one-quarter
and nowrap. The align attribute can be used to affect visual positioning (e.g. ¬ ¬ : not sign ½ ½ 1=2 fraction one-half
<credit>The local paper took this shot.</credit> 3=4

align="center"). - soft hyphen ¾ ¾ fraction three-quarters
</figure> ® ® R registered sign ¿ ¿ ¿ inv. question mark
<banner>: : : </banner> Encloses static information to ¯ ¯ ¯ macron × × Multiply sign

remain on display ° ° degree sign ÷ ÷ Division sign
<bq>: : : </bq> Synonymous with
<blockquote>
Forms
<div class="...">: : : </div> To mark divisions (chapter,
section, etc)
<lh>: : : </lh> In lists, supplies a list header or <input type="file"...> Allows uploading of files to a
title before the first <li> or server, permitted types specified
<dt> with accept (change enctype
<note role="...">: : : </note> Identifies footnotes, sidenotes of <form> to
etc multipart/form-data) Copies of this card can be downloaded in PostScript and .dvi format for A4 and Letter size stationery from
<spot id="label "> Marks a reference point for <input type="scribble"...> For pen input ftp://ftp.thomson.com/itcp/WebExtras/ using anonymous FTP. Information about ITCP’s
<range> <input type="audio"...> For sound input titles can be obtained from http://www.thomson.com/intlitcp.html.

Htmlcard Letter

Uploaded by

Copyright:

Available Formats

You might also like

Htmlcard Letter

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Htmlcard Letter

Uploaded by

Copyright:

Available Formats

HTML Quick Reference Guide Block-oriented elements Images

<style notation="...">: : : </style> Encloses stylesheet information

You might also like