HTML
The basic web page is typically a text file written in Hypertext Markup Language (HTML) or EXtensible Markup Language (XHTML) which can be read into and understood by an Internet browser. For the purpose of formatting, page content is "marked up" into pieces known as elements. These pieces may be a whole block of text (a block element) or a fragment of text within a paragraph that moves with the text as it flows along the line (inline element). There are also placeholders (replaced elements) to indicate where other content, such as images, are to be embedded. The main elements are listed below.
In the code, the extent of influence of each element is marked by an opening and a closing tag placed at the start and end of the text concerned. Each tag is separated from the text by angle brackets; the tags, including the angle brackets, are acted on but not displayed by the browser. Each element type has its own basic formatting characteristics already known to the browser. Additional formatting instructions are applied to the specific element via the use of attributes placed inside the starting tag. The text in white below is an attribute of the particular paragraph element and refers to style information located elsewhere.
The new common core attributes for all element tags and their function
Recent versions of HTML have tags that can take any of the universal attributes listed below.
| Attribute | Example | Purpose |
|---|---|---|
| id | id="anyuniquetext" | Provides a unique identifier for style sheets and scripting |
| class | class="anytext" | Allows tags to be classified for obeying general rules on style sheets |
| style | style="font-size: 14pt" | Inputs a style directly to the tag |
| title | title="meaningful text" | Provides meaningful tool tip when mouse is over |
| lang | lang="fr" | Identification for non-ASCII based languages, rarely supported |
example: <a href="newfile.htm" target="_top">click here</a>
The elements and their characteristics
Block elements specify a horizontal slice of the page which can contain text, inline and replaced elements. Many have a default blank separating line above and below the block. Some blocks can contain other blocks, as indicated.
| Block element tags | Comments and common attributes | 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; where h1 is usually has largest text. Default text sizes set by browser. | 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, attributes: size (height) in
pixels,
width in % or pixels, alignment and shading/no shading. |
No | No |
| <table></table> | table attributes: width="100% " border="0" cellspacing="2" cellpadding="2" | 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 ddblocks 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 style="color: red; background:lemonchiffon" or similar to the button opening tag.
- The value of the button appears on the front of the button.
- Use style="color: maroon; background:lemonchiffon" or similar 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 |
The language has been considerably simplified and much is replaced
by CSS, the subject of the next page. 