other>computing>code
xhtml
Hypertext mark-up language (HTML or XHTML) is the basic coding for a web page. The mark up instructions to the browser on how to display the readable text are contained within the text itself but identified by angle brackets. The instructions divide the text up into elements, each type having its own properties. Rather like word processor styles, some apply to complete blocks of text while others apply to text within a line while a third category define places for other items such as images and videos.
In addition to default characteristics, elements have settable attributes. Now, however, most of these have been replaced by instructions set by styles (cascading stylesheets, CSS) either directly through the style attribute of the element or by a remotely linked style sheet.
| Block element tags | default characteristics | Blank sep line | Contains other blocks |
|---|---|---|---|
| <body></body> | The outermost container which delineates the page and contains everything visible. Every page has a body except a frameset. | No | Yes |
| <div></div> | Division, a multipurpose block for text with no default formatting. Can contain any element except body | No | Yes |
| <form></form> | Delineates a form, which can consist of text, tables, and form elements | Yes | Yes |
| <h1></h1>to <h6></h6> | Heading; Increasing text sizes are set by browser; h1 is usually has largest text. | Yes | No |
| <p></p> | Paragraph of text. | Yes | No |
| <blockquote></blockquote> | A para with both sides indented. | Yes | Yes |
| <hr /> forward slash only in XHTML |
horizontal line, settable attributes:
size (height) in pixels, width in % or pixels, alignment and shading/no
shading. |
No | No |
| <table></table> | table attributes: width, border thickness cellspacing, cellpadding | No | Table rows only |
| <td></td> | TableCell attributes: width in % or pixels, valign (vertical alignment top middle or bottom), align (horiz alignment left, right, center)), rowspan or colspan (number of cells joined horizontally or vertically) | No | Yes |
| <th></th> | TableHead holds a header row of cells whose contents are usually centred and boldened | No | Table cells only |
| <tr></tr> | TableRow holds row of cells | No | Table cells only |
| <ul> list items see below</ul> | a bulleted list, attribute: type="zzz" where zzz=circle, disk or square | Yes | ul contains li's
only |
| <ol type="n">list items see below</ol> | a numbered list where type can be 1, a, A or I | Yes | ol contains li's only |
| <li>list item</li> | Must be within ol, ul or li. Left indented. A number or bullet, is set by the enclosing ul or ol, outside the indent. | No | Yes |
| <dl>see below</dl> | a definition list - contains alternate term (dt) blocks and definition (dt) blocks | Yes | dl's contain dt's
and dd's |
| <dt>word</dt> < dd>definition</dd> |
dd blocks are indented but dt blocks are not. | No | dd's yes |
Inline elements move with the text as it reflows when browser window width is changed.
| Inline element tags | Comments and common attributes |
|---|---|
| <a></a> |
hypertext link: takes attribute
href="file.htm#anchor" and accesses a new web page(file.htm)
or location within a page (#anchor) if included attribute target="hierarchy" specifies the frame or window the new page should appear |
| <a ></a> | anchor: the attribute name="anchor" defines a named point in document (anchor) for links to point to |
| <br /> | line break: attribute clear="all"
is used to prevent text riding up around a floating image single forward slash only required in XHTML |
| <b></b> (sometimes <strong>) | emboldens text |
| <i></i> (sometimes <EM>) | Italic |
| <span></span> | delineates a general purpose in-line selection of text |
| <sub></sub> | SUBscript. |
| <sup></sup> | SUPerscript. |
| <!-- comment --> | browser ignores anything inside |
'Replaced' elements reserve an area on a page in which another file (such as an image) is displayed. Note that images are displayed on the page but are not embedded in it - they must always be provided separately and the location must be specified in the tag using the 'src' attribute and relative addressing.
| Replaced element tags | Comments and common attributes |
|---|---|
| <img/> | attributes: src="image.gif"
width="200" height="120" border="0"
hspace="5" align="right" alt="descn for
text-only browsers", use title for tool tip An image place-holder where src points to the image file using relative addressing. |
| <input type="see below" value etc /> | A box or button for user input |
| <object> </object> |
embeds active x, java applet or other object, attributes according to type but including height and width |
| <select><option>first
option <option>second option</select> |
dropdown list for form. See inputs list below |
| <textarea /> | attributes: name="xx" cols="n"
rows="n" wrap="virtual" A multiline text box for inputting data to a form. See inputs list below |
The form input elements are defined by their type attribute:
| Input elements | Tag with attributes | notes |
|---|---|---|
| Text field | <input name="xx" type="text" maxlength="n", size="n" > | 1,11 |
| Radio button | <input name="xx" type="radio" > | 2 |
| Check box | <input name="xx" type="checkbox" value="ticked"> | 3,12 |
| Reset button | <input name="xx" type="reset" > | 4,9 |
| Submit button | <input name="xx" type="submit" > | 5,9 |
| Ordinary button | <input name="xx" type="button" value="anything"> | 8,9,10 |
| Drop down list | <select name="xx" size="2" ><OPTION value="optionvalue">list description </select> | 6,11 |
| Text Area | <textarea name="xx" cols="n" rows="n" wrap="**" > | 7,11 |
- Maxlength refers to field length size to max characters visible
- To force a single choice give each radio element in the group the same name, add 'checked' attribute against the one you want as default selection if you want one.
- Usually for multiple choice, add 'checked' against any default choices
- Resets input values to default
- Initiates action defined in form action
- Place <option value=optionvalue>list description for each value in list and size=n for number of values visible, usually 1. If used, optionvalue is what goes into the name/value pair, whereas the visitor sees the list description.
- Wrap options are off, physical to send as separate lines or virtual to send as one.
- Use ordinary buttons to initiate JavaScript
- To colour buttons, add a style attribute with color and background-color properties to the button opening tag.
- The value of the button appears on the front of the button.
- Add a style attribute with color and background-color properties to colour the text boxes.
- Any value can be used here but ticked is readily understood.
Frame elements are for use when multiple pages are displayed in one window; this is less popular nowadays.
| Frame elements | Comments and common attributes |
|---|---|
| <frame /> | attributes: src="any.html" name="panename" marginwidth="2" marginheight="2" scrolling="0" |
| <frameset> </frameset> | attributes: cols="50%,50%"
rows="*,80" border="0" framespacing="0"
frameborder="0" defines the size and arrangement of a set of frames and type of borders. 0 for no or 1 for yes Spacing in pixels |
| <noframes></noframes> | the text inside this element is displayed when the browser does not display frames |
The page begins with a doc type definition which defines the standards which should be used by the browser in interpreting the code. Then there is a head section giving information about the document that is not dispayed in the window. The body element holds the visible content.
Elements within the HEAD of the page:
| Tag | Function |
|---|---|
| <head></head> | identifies the invisible head section |
| <title></title> | identifies the browser frame title, often used by browsers to identify favourites |
| <link rel=stylesheet type="text/CSS" href="URL" /> | links document to a style sheet, where URL is name & address of style sheet |
| <style type=text/CSS></style> | encloses and identifies styles applicable to the page itself. Protection by comment tag recommended |
| <script language="JavaScript"></script> | encloses and identifies a script which runs when the page opens. Protection by comment tag recommended |
| <meta name="keywords" content="key1, key2,etc." /> | provides a search list for search engines |
| <meta name="description" content="description of site" /> | provides a brief description for search engines |
| <meta HTTP-EQUIV="Refresh" content="5, URL" /> | replaces page by another in the stated number of seconds |
| <meta HTTP-EQUIV="Expires" content="date & time" /> | provides an expiry date for page |
Special Character entities
Be aware that not all characters work in all environments
| special characters | numerical | named | disp |
|---|---|---|---|
| left single quote | ‘ | ‘ | |
| right single quote | ’ | ’ | |
| single low-9 quote | ‚ | ‚ | |
| left double quote | “ | “ | |
| right double quote | ” | ” | |
| double low-9 quote | „ | „ | |
| dagger | † | † | |
| double dagger | ‡ | ‡ | |
| single left-pointing angle quote | ‹ | ‹ | |
| single right-pointing angle quote | › | › | |
| spade suit | ♠ | ♠ | |
| club suit | ♣ | ♣ | |
| heart suit | ♥ | ♥ | |
| diamond suit | ♦ | ♦ | |
| overline, = spacing overscore | ‾ | ‾ | |
| leftward arrow | ← | ← | |
| upward arrow | ↑ | ↑ | |
| rightward arrow | → | → | |
| downward arrow | ↓ | ↓ | |
| trademark sign | ™ | ™ | ™ |
| exclamation mark | ! | ! | |
| double quotation mark | " | " | " |
| number sign | # | # | |
| dollar sign | $ | $ | |
| percent sign | % | % | |
| ampersand | & | & | & |
| apostrophe | ' | ' | |
| left parenthesis | ( | ( | |
| right parenthesis | ) | ) | |
| asterisk | * | * | |
| plus sign | + | + | |
| multiplication sign | × | × | × |
| semicolon | ; | ; | |
| less-than sign | < | < | < |
| greater-than sign | > | > | > |
| question mark | ? | ? | |
| at sign | @ | @ | |
| left square bracket | [ | [ | |
| backslash | \ | \ | |
| right square bracket | ] | ] | |
| caret | ^ | ^ | |
| underscore | _ | _ | |
| grave accent | ` | ` | |
| left curly brace | { | { | |
| vertical bar | | | | | |
| right curly brace | } | } | |
| tilde | ~ | ~ | |
| ellipses | … | … | … |
| en dash | – | – | – |
| em dash | — | — | — |
| nonbreaking space |   | | |
| inverted exclamation | ¡ | ¡ | ¡ |
| cent sign | ¢ | ¢ | ¢ |
| pound sterling | £ | £ | £ |
| yen sign | ¥ | ¥ | ¥ |
| broken vertical bar | ¦ | ¦ or &brkbar; | ¦ |
| section sign | § | § | § |
| umlaut | ¨ | ¨ or ¨ | ¨ |
| lowercase a, umlaut | ä | ä | ä |
| uppercase A, umlaut | Ä | Ä | Ä |
| lowercase o, umlaut | ö | ö | ö |
| uppercase O, umlaut | Ö | Ö | Ö |
| lowercase u, umlaut | ü | ü | ü |
| uppercase U, umlaut | Ü | Ü | Ü |
| lowercase sharp s, German | ß | ß | ß |
| copyright | © | © | © |
| left angle quote | « | « | « |
| not sign | ¬ | ¬ | ¬ |
| registered trademark | ® | ® | ® |
| macron accent | ¯ | ¯ or &hibar; | ¯ |
| degree sign | ° | ° | ° |
| special characters | numerical | named | disp |
|---|---|---|---|
| plus or minus | ± | ± | ± |
| superscript two | ² | ² | ² |
| superscript three | ³ | ³ | ³ |
| acute accent | ´ | ´ | ´ |
| micro sign | µ | µ | µ |
| paragraph sign | ¶ | ¶ | ¶ |
| middle dot | · | · | · |
| cedilla | ¸ | ¸ | ¸ |
| superscript one | ¹ | ¹ | ¹ |
| masculine ordinal | º | º | º |
| right angle quote | » | » | » |
| one-fourth | ¼ | ¼ | ¼ |
| one-half | ½ | ½ | ½ |
| three-quarters | ¾ | ¾ | ¾ |
| inverted question mark | ¿ | ¿ | ¿ |
| uppercase A, grave accent | À | À | À |
| uppercase A, acute accent | Á | Á | Á |
| uppercase A, circumflex accent | Â | Â | Â |
| uppercase A, tilde | Ã | Ã | Ã |
| uppercase A, ring | Å | Å | Å |
| uppercase AE | Æ | Æ | Æ |
| uppercase C, cedilla | Ç | Ç | Ç |
| uppercase E, grave accent | È | È | È |
| uppercase E, acute accent | É | É | É |
| uppercase E, circumflex accent | Ê | Ê | Ê |
| uppercase I, circumflex accent | Î | Î | Î |
| uppercase O, grave accent | Ò | Ò | Ò |
| uppercase O, acute accent | Ó | Ó | Ó |
| uppercase O, circumflex accent | Ô | Ô | Ô |
| uppercase O, tilde | Õ | Õ | Õ |
| uppercase O, umlaut | Ö | Ö | Ö |
| uppercase O, slash | Ø | Ø | Ø |
| uppercase U, grave accent | Ù | Ù | Ù |
| uppercase U, acute accent | Ú | Ú | Ú |
| uppercase U, circumflex accent | Û | Û | Û |
| uppercase Y, acute accent | Ý | Ý | Ý |
| lowercase a, grave accent | à | à | à |
| lowercase a, acute accent | á | á | á |
| lowercase a, circumflex accent | â | â | â |
| lowercase a, tilde | ã | ã | ã |
| lowercase a, ring | å | å | å |
| lowercase ae | æ | æ | æ |
| lowercase c, cedilla | ç | ç | ç |
| lowercase e, grave accent | è | è | è |
| lowercase e, acute accent | é | é | é |
| lowercase e, circumflex accent | ê | ê | ê |
| lowercase e, umlaut | ë | ë | ë |
| lowercase i, grave accent | ì | ì | ì |
| lowercase i, acute accent | í | í | í |
| lowercase i, circumflex accent | î | î | î |
| lowercase i, umlaut | ï | ï | ï |
| lowercase eth, Icelandic | ð | ð | ð |
| lowercase n, tilde | ñ | ñ | ñ |
| lowercase o, grave accent | ò | ò | ò |
| lowercase o, acute accent | ó | ó | ó |
| lowercase o, circumflex accent | ô | ô | ô |
| lowercase o, tilde | õ | õ | õ |
| division sign | ÷ | ÷ | ÷ |
| lowercase o, slash | ø | ø | ø |
| lowercase u, grave accent | ù | ù | ù |
| lowercase u, acute accent | ú | ú | ú |
| lowercase u, circumflex accent | û | û | û |
| lowercase y, acute accent | ý | ý | ý |
| lowercase y, umlaut | ÿ | ÿ | ÿ |
| Greek alphabet | |||
| Alpha, alpha | Α | α | Α α |
| Beta, beta | Β | β | Β β |
| Gamma | Γ | γ | Γ γ |
| Omega | Ω | ω | Ω ω |
| password dot | ● | ● | |
| bullet | • | • |
