HTML
Tags
<x y1=z y2 y3=...>
- x is called the tag
- yN is called an attribute and can be assigned a value (or not),
depending on what that attribute represents.
- attributes are separated by spaces and can appear in any order within the
tag
- attributes require quotes only when the value includes spaces. The maximum
length of a value is 1K
- an end tag is a tag with a preceding / and indicates the end
of that section. End tags do not have attributes.
- the exception is the comment tag (<!--) which has an end tag of --> (Note:
IE supports a <comment> tag, but this tag is not part of the HTML standard).
- Examples:
<i>This is in italics</i>
<b>This is bold and <i>bold italics</i></b>
<!-- This is a comment -->
- ?? Do tags have to be terminated in the order they were generated? is
<b>bold<i>bold italic </b> italic </i> valid? ??
- Tags (outside of Java Style Sheets (JSS)) are not case sensitive
The following tags do not have an end tag:
area, base, basefont, br, col, frame, hr, img, input, isindex (depreciated
in v4), link, meta, param
End tags for the following are optional:
p
HTML Document
The minimum html document consists of the following tags*:
| <html> |
Says "The following is a html document". Can include a
DIRection indicator (RTL or LTR) and a language |
| <head> |
Can contain all the <meta> tags.
Can contain Cascading Style Sheet (CSS) <style> tags |
| <body> |
Loadsa stuff. Can be replaced with <frameset> tags to
support frames |
| <title> |
The document's title |
* Most browsers are happy to display a file that is missing the "required"
tags.
<body>
Note: Pretty much all of these have been depreciated in
v4.
- bgcolor="#rrggbb" (or colour name)
Sets the background colour for the page
- background
Specifies the URL of a image to be displayed as the tiled backdrop. IE
supports an additional attribute, bgproperties="fixed", which prevents the
backdrop image being scrolled with the rest of the document.
- text="##rrggbb" (or colour name)
Sets the default text colour
Common Text Formatting Tags
| <em> |
Emphasis |
| <strong> |
Emphasis+ |
| <code> |
Normally, non-proportional font suitable for displaying
code snippets |
| <tt> |
Teletext (again, non-proportional font) |
| <H1> - <H6> |
Headings (H1 = largest, H6 = smallest) |
| <b> |
Bold |
| <i> |
Italics |
| <u> |
Underline |
| <strike> |
Strikethrough |
| <big> |
Slightly bigger text |
| <small> |
Slightly smaller text |
| <sup> |
Superscript |
| <sub> |
Subscript |
Escape Sequences
| < |
> |
& |
&#nnn; |
|
|
|
|
| < |
> |
& |
Chr(nnn) |
|
|
|
|
Breaking Text Up
- <br> (Line-break)
Starts a new line directly below current one.
- <p> (Paragraph)
Marks a section of text. Includes more whitespace between lines than <div>.
See <div> for description of the align, class and title attributes.
- <div> (Division)
Marks a section of the document (which can contain anything). When
"undecorated" acts the same as <br>. Attributes include:
- id Allows the division to be
"named" and thus reference elsewhere in the document (including in style
sheets).
- class Normally only used by automatic document
processors. Indicates the type of data to be found in the division (e.g.
summary, references, abstract, bibliography etc.)
- align Sets the default alignment for everything within
the division. Possible values are left, center and right.
- nowrap (IE only) prevents the automatic wrapping of lines. Suggest use <nobr>
instead.
- title (varies from browser to browser) IE displays the
title element of a tag as a tooltip when the mouse moves over it
- <hr> (Horizontal Rule)
Places a horizontal line across the screen (in a new row). No end tag is
required. The size attribute allows control over the width of the line and
width (!) over the length. Width can also be specified as a percentage. Most
of <hr>'s attributes (including width, align etc.) are depreciated in v4.
- <pre> (Preformatted text)
Text in this section will appear as typed (normally, HTML will ignore items
such as carriage returns and line feeds in the source)
Hyperlinks
- <a> (Anchor tag)
Creates a hyperlink to refer the browser to the URL specified in the href
attribute. For example: <a href="http://www.brankin.com">Visit my home
page!</a>. ?? Book says Hyperlinks can jump to a specific division in a
document using a href of URL#divisionID. For example, <a href="http://www.brankin.com#myDiv>Sheep
- My woolly friends</a>, but it didn't work for me when I tried it ??
The (optional) target attribute of the anchor
tag specifics where the window will be opened. Target can be a special value
(_blank, _self (the default), _parent (=self if no parent found) or _top), the
name of specific frame or the name of a window (the first time that window
name is used a new window is automatically opened, then after using that name
directs output to that same window).
href can be set to the result of a javascript function, e.g. <a href="javascript:generateURL()">.
If the function returns no value, the page is not changed, allowing links to
easily be assigned to functions, e.g. <a href="javascript:alert('Please do not
press this button again.')">
- <base>
Changes the default value for the target
attribute for all anchor tags on the page.
Images
- <img> (Image)
Only GIF and JPEG formally supported. A image tag can be placed within an
anchor tag.
- src (Image Source)
- alt (Alternative text)
Placeholder text string. Up to 1K
- longdesc (Long Description)
URL of a document that describes the contents of the picture
- align (Alignment)
Supports more values than other tag's align attributes. Values include: top,
middle, bottom, absmiddle, center, baseline, absbottom. left and right place
the image in the margin, allow text to wrap around it.
- border
The border size (in pixels). Set to zero if you don't want your transparent
gifs to look wierd.
- height & width
Use to preserve screen space during download or to resize an image
- hspace & vspace
Places a margin of the specified size around the image (by default, only a 2
pixel margin appears, which is a bit close)
- ismap
Causes mouse click coordinates to be set to the server for server-side image
mapping. This attribute can only be specified if the <img> tag is within an
anchor tag.
- usemap
Used with client-side image mapping
Lists
- <ul> (Unsorted list)
Bullet pointed list. Each item in the list is marked with the list item (<li>)
tag.
- <ol> (Ordered list)
Numbered (by the HTML renderer) list. Each item in the list is marker with the
list item (<li>) tag
- <dl> (Definition list)
Pairs of text. The "term" is defined in the <dt> tag and the "definition" in
the <dd>. The definition is normally displayed indented under the term.
Obviously not just used to show terms & definitions.
List examples:
<ol><li>Item 1</li><li>Item 2</li></ol>
<dl>
<dt>Term1</dt>
<dd>Explaination of Term1</dd>
<dt>Term2</dt>
<dd>Explaination of Term2</dd>
<dt>Term3</dt>
<dd>Explaination of Ter31</dd>
</dl>
<Input>
<button>
- Unlike <input type=...> it requires an end tag and the text between the
tag and end tag is displayed as the button's caption (rather than using the
value attribute).
- Behaviour is controlled by the type attribute:
- The advantage of <button> over <input type=button> is that everything
between <button> and </button> forms part of the button and this can be any
valid HTML (including video clips, images etc.)
<Select>
Presents the user with a combo-box or list-box style GUI element. Which is
displayed is controlled by the size element.
- Each item in the list is defined with <option> tag. No </option> is
required, for example
<select name=cboList size=1>
<option>Pick Me!
<option>No, Pick Me!
<option>I'm the best!
</select>
?? Book says no default for combos, when I try it on IE6 the first item in the
list is automatically selected if size=1 ??
- Each <option> can have an associated <value>. If it does not then the
value of <option> is sent in its place to the server.
- Multiple selection is allowed, add the multiple
attribute.
- The <optgroup> tag can be used to indent options, but does not work as
envisioned by the HTML authors in IE (they wanted nested menus). For example:
<select name=cboList size=3>
<optgroup label=Heading 1>
<option>I'm
in group 1
<option>So am
I
</optgroup>
</optgroup label =Heading 2>
<option....
</optgroup>
</select>
Gives an output something like this
Heading 1
I'm in group 1
So am I
Note: Only the <option> entries can be selected. Clicking on the <optgroup>
does nothing.
Forms
Tables
Within the <table> tag the following attributes are common (most of these are
also available to the <td> and <th> tags):
- bgcolor
Background colour (note: NOT background-color as it is named elsewhere)
- border
Border width
- frame=above / below / lhs / rhs / hsides /rsides / groups / row /
columns
Controls how the border is drawn
- bordercolor / bordercolorlight / bordercolor / bordercolordark
Colours used to obtain the 3d effect
- cellspacing
Distance between cells
- cellpadding
Cell margins
- hspace & vspace
Horizontal and Vertical position of the top left corner of the table (relative
to the current "position")
- align=left / center / right
Depreciated
- valign=top/bottom/middle/baseline
Default vertical positioning for all cells
- width
Width override
- caption
- title
Tooltip (IE only)
Within the <table> tag the following tags are common:
- <tr> Table Row
Starts a new table row
- <th> Table Header
Occurs within the <tr> tag. ?? The difference between <th> and <td>
appears only to be in the default formatting.??
- <td> Table Data
Occurs within the <td> tag. ?? The difference between <th> and <td> appears
only to be in the default formatting.??
Example:
<table border=1>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>A 3rd Column<br>2nd line of 3rd
Column!</th>
</tr>
<tr align = right>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
should produce something like:
| Column 1 |
Column 2 |
Column 3
2nd line or 3rd Column! |
| 123 |
456 |
789 |
(the bold and centring of the header cells are due to the <th> tag. <th> tags
can appear anywhere in the table. A table does not have to contain <th> tags)
The <td> and <th> tags also support the following additional attributes:
- height
- colspan (column span)
Expands the cell to the right across the specified number of columns
- rowspan (row span)
Expand the cell downwards across the specified number of rows
Meta-data
- <meta name="name" content="value">
e.g.
<meta name="authors" content = "Dave Brankin">
<meta name="keywords" content = "brankin, sheep, court case">
- <meta http-equiv="name" content="value">
Adds a line to the the HTTP header returned for the page, containing name:
value
For example:
<meta http-equiv="expires" content="31 Dec 02">
<meta http-equiv="Refresh" content="15;URL=www.brankin.com/nextpage.htm">
Cascading Style Sheets
- Can be declared "in-line" using the <style> tag:
<h1 style="color: red; font-style: italic">An Italic H1 in red</h1>
- Normally declared within the <head> tag and to apply to the entire
document:
<head>
<style type="text/css">
H1 {color: red; font-style: italic}
</style>
</head>
...
<H1>I'm automatically italic & red!</H1>
- type is always "text/css" for cascading style sheets (other options
include text/jss for java style sheets (Netscape only)). This attribute can be
omitted in IE.
- CSS can be held externally as separate files, then "imported" in one of
two ways. Firstly, they can be imported into the head using the <link> tag:
<head>...
<link rel=stylesheet type="text/css" href="http://www....">
...</head>
Secondly, they can be imported using the @import command (IE only):
<head>...
<style>
@import
url(http://www....);
</style>
</head>
- CSS files can include comments, but only in /*... */ blocks
- The general structure of a CSS statement is tagList {property:value;
property:value;...}
- tagList is a comma-delimited list of the effected tags minus their
bounding angled brackets. For example: H1, H2, H4 {text-align: center}
- If you use spaces instead of commas in the tag list then the browser will
apply the property list only when it encounters those tags in that order. For
example:
OL LI {list-style: upper-alpha}
OL OL LI {list-style: upper-roman}
OL OL OL LI {list-style: lower-alpha}
OL OL OL OL LI {list-style: decimal}
specifies that that multiple-level bullet point lists use the format upper
alphabet, Roman Numeral, lower alphabet, decimal [e.g. A) I) a) 3)]
- If a property can have several "values" these can be specified by
separating them with spaces, for example: ...property:value1 value2
value3...
- A CSS class allows a style to be defined once and then used by all tags
declared with that style. For example:
<style>
.myClass {color: red;font-style:
italic;text-align: center;margin-left: 0.5cm}
</style>
....
<p class="myClass">Hello World!</p>
<div class=myClass">This is a division"</div>
...
Note the leading dot on the myClass definition.
The syntax for nested styles is H1 P.myClass (i.e. the last 'step' is dot
notation, all others are spaces!) rather than the H1.P.myClass you
might have expected.
CSS classes can be applied to id attributes rather than class attributes by
using a # where we previously used a dot.fs
- CSS also supports "pseudo" classes for special cases such as the anchor
tag. Pseudo classes use a column in place of the hash or dot shown previously,
for example:
| A:active {...} |
URLs that have just been clicked (before target loads) |
| A:link {...} |
URLs that have not yet been visited |
| A:visited {...} |
URLs that have already been vistied |
| P:first-line {...} |
Format of the first line of the paragraph |
| P:first-letter {...} |
Format of the first letter of the first paragraph. e.g.
{font-size 200%} to make the letter bigger. |
- If a property in a CSS requires an URL, you must specify in the format:
URL(url). url does not require bounding quotes. For example: P
{background-image: url(images\paragraphBackdop.bmp)}
- The font-size property's value can be in several different formats npt
sets it to n point font, n% sets it to a percentage of its current
size, +npt and -npt increases or decreases the size in points.
Other values include "medium", "larger", "xx-large" etc. ?? rumoured browsers
do not interpret +/-npt correctly ??
Frames
The <frameset> tag indicates the page is to use frames and basically replaces
the <body> tag. Such a page can't include much beyond the frame details. The
<frameset> tag indicates the number of row or columns in the frameset using the
rows or cols
attributes, which take a quotes string of comma-delimited values to represent
the size of each frame. For example <frameset rows="20%,40%,40%">. An asterix
can be used to represent "remaining space", for example <frameset
rows="150,*,150">. You can use the astrix multiple times if required (e.g.
rows="*,200,*")
<frameset> can be nested. The noresize
attribute can be used to prevent a frameset being resized (not recommended).
Framesets automatically add scrollbars if the contained page is bigger than the
frame. Scrollbars can be forced to always show by setting the
scolling attribute to "yes".
Within the <frameset> tag each frame is represented by the <frame> tag.
Frames are placed in the frameset in the order they are declared, from left to
right and top to bottom. The main attributes of the <frame> tag are src (which
is a URL to the file that will be displayed in that frame) and name (which can
be used with the anchor tag's target attribute to open a new page in a specific
frame).
Sample:
<html>
<frameset cols="50%,50%">
<frameset
rows = "50%,50%>
<frame src="topLeft.htm">
<frame src="botLeft.htm">
</frameset>
<frameset
rows = "33%,33%,*>
<frame src="topRight.htm">
<frame src="midRight.htm">
<frame src="botRight.htm">
</frameset>
</frameset>
</html>
Javascript
The <script tag>
- The src attribute can be used to specific the URL of a file that contains
the code.
- The defer attribute can be used to indicate the code contained in the
script does not alter the initial rendering of the page (i.e. no
document.write commands) and as such compilation can be deferred until after
the page is loaded, giving the appearance of a faster load time.
- The language attribute can be used to select between javascript (the
default) and vbscript.
&{javascript};
- Can be merged with normal HTML, for example:
<p color=&{getFavoriteColor('paragraph')};>
Misc
- MIME
Multipurpose Internet Mail Extension
- Default SHTTP port is 443
- Tidla (~) as the first character of a URL after the base URL has special
meaning on Unix machines. Something to do with personal directories.
- The bookmark portion of a URL (the bit after the #) is properly referred
to as a URL fragment
- ftp://[user:password@]server[:port]
- mailto:user@address[?subject=some subject&cc=user2@address2...]
- <SPAN> ... </SPAN>
Used to mark a section of the document, normally to allow overriding of
formatting without have to change the settings of the bounding tags.
- To automatically call a function when the document has finished loading:
<BODY onload="somefunction()">
- The comment block is <!-- to open and --> to close. Unfortunately, comment
blocks are sometimes used to embed code and other information.
- Although its <TAG class="..."> in HTML, in DHTML it's tag.className
and not tag.class