XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
|
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
|
Note: A common mistake with nested lists, is to
forget that the inside list must be within <li> and </li> tags.
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code
example.
XHTML Elements Must Always Be Closed
Non-empty elements must have an end tag.
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
|
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
|
Empty Elements Must Also Be Closed
Empty elements must either have an end tag or the start tag must end with />.
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
|
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
|
XHTML Elements Must Be In Lower Case
The XHTML specification defines that the tag names and attributes need to be lower case.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
|
This is correct:
<body>
<p>This is a paragraph</p>
</body>
|
XHTML Documents Must Have One Root Element
All XHTML elements must be nested
within the <html> root element. All other elements can have sub
(children) elements. Sub elements must be in pairs and correctly nested within
their parent element. The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>
|
Mandatory XHTML Elements
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the
title must be present inside the head element.
This is a minimum XHTML document template:
|
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
|
|
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
HTML File
|
<html>
|
none
|
</html>
|
|
File Header
|
<head>
|
none
|
</head>
|
|
File Title
|
<title>
|
none
|
</title>
|
|
Comments
|
<!--
|
Your comments go between the start and end
tags. Put a space between the -- and your comments.
|
-->
|
|
Body
|
<body>
|
background="filename"
bgcolor="color value"
text="color value"
link="color value"
vlink="color value"
|
</body>
|
|
Division
|
<div>
|
align="right/left/center"
style="property:value;"
class="classname"
|
</div>
|
|
|
|
|
|
|
Basic Text Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Line Break
|
<br>
|
clear="left/right/all"
|
</br> or <br />
|
|
Paragraph
|
<p>
|
align="center/right"
|
</p>
|
|
Bold
|
<b>
|
none
|
</b>
|
|
Italic
|
<i>
|
none
|
</i>
|
|
Headline
|
<h1-6>
|
align="center/right"
|
</h1-6>
|
|
Font
|
<font>
|
face="name, name"
size="+/-value/fixed size"
color="color value"
Note: the font tag is being phased out in favor of CSS
styles.
|
</font>
|
|
Horizontal Rule
|
<hr>
|
size="XX"
width="XX/XX%"
noshade
|
</hr> or <hr />
|
|
Block Quote
|
<blockquote>
|
none
|
</blockquote>
|
|
Division
|
<div>
|
align="left/center/right"
|
</div>
|
|
List Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Unordered List
|
<ul>
|
type="disc/circle/square"
|
</ul>
|
|
Ordered List
|
<ol>
|
type="I/A/1/a/i"
start="value to start counting at"
|
</ol>
|
|
List Item
|
<li>
|
type=all ul and ol options
|
</li>
|
|
Link Tags
|
|
|
|
|
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Anchor Link
|
<a>
|
href="filename"
target="windowname"
|
</a>
|
|
|
|
|
|
|
Image Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Insert Image
|
<img>
|
src="filename"
align="left/right"
width="XXX"
height="XXX"
alt="text that desribes image"
ISMAP
USEMAP="#mapname"
|
</img>
|
|
Client-side Imagemap Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Define Map
|
<map>
|
name="mapname"
|
</map>
|
|
Area Definition
|
<area>
|
shape="rect/circle/poly/point"
coords="X,Y,X,Y"
href="imagename"
|
</area>
|
|
Table Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Table
|
<table>
|
border="X"
width="XX/X%"
cellspacing="XX"
cellpadding="XX"
bgcolor="color value" background="filename"
|
</table>
|
|
Table Row
|
<tr>
|
align="left/center/right"
valign="top/middle/bottom"
bgcolor="color value"
|
</tr>
|
|
Table Data
|
<td>
|
align="left/center/right"
valign="top/middle/bottom"
width=X
nowrap
colspan="X"
rowspan="X"
bgcolor="color value"
|
</td>
|
|
Table Header
|
<th>
|
align="left/center/right"
valign="top/middle/bottom"
width=X
nowrap
colspan="X"
rowspan="X"
bgcolor="color value"
|
</th>
|
|
Frame Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Set Frames
|
<frameset>
|
cols="XX/XX%/*"
rows="XX/XX%/*"
|
</frameset>
|
|
Frame Definition
|
<frame>
|
src="filename"
name="framename"
noresize
scroll=auto/yes/no
marginwidth="XX"
marginheight="XX"
|
</frame>
|
|
Base
|
<base>
|
target="framename"/
"_self"/
"_top"/
"_parent"
(Note the underscores)
|
</base>
|
|
Form Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Form
|
<form>
|
method=get/put
action="programname"
|
</form>
|
|
Input Field
|
<input>
|
name="variablename"
type=text/password/
checkbox/radio/submit/
reset/image
|
</input>
|
|
Selection List
|
<select>
|
name="variablename"
size=XX
multiple
|
</select>
|
|
Selection Option
|
<option>
|
none
|
</option>
|
|
Scrolling Text Field
|
<textarea>
|
name="variablename"
rows=XX
cols=XX
|
</textarea>
|
|
Meta Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
<meta>
(Server metatags)
|
http-equiv="refresh"
content="seconds, filename"
|
none
|
</meta>
|
|
<meta>
(Content metatags)
|
name="keywords/description/author/
generator/abstract/expiration"
content="your information"
|
none
|
</meta>
|
|
Style Sheet Tags
|
|
Function
|
Start Tag
|
Attributes
|
End Tag
|
|
Style Definition Area
|
<style>
|
type="text/css">
Style declarations go between begin and end style tags
|
</style>
|
|
Link to external CSS File
|
<link>
|
rel=stylesheet
type="text/css"
href="URL"
|
none
|
|
Commonly-Used Special Characters
|
|
Name
|
Symbol
|
HTML Equivalent
|
|
ampersand
|
&
|
&
|
|
cent sign
|
¢
|
¢
|
|
copyright symbol
|
©
|
© or ©
|
|
degree sign
|
°
|
°
|
|
greater than
|
>
|
>
|
|
less than
|
<
|
<
|
|
non-breaking space
|
|
|
|
registered trademark
|
®
|
®
|
|
trademark
|
|
™
|
Window Object Collections
|
Collection
|
Description
|
IE
|
F
|
O
|
|
frames[]
|
Returns all named frames in the window
|
4
|
1
|
9
|
Window Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
|
|
Returns whether or not a window has been closed
|
4
|
1
|
9
|
|
|
Sets or returns the default text in the statusbar of the window
|
4
|
No
|
9
|
|
|
|
4
|
1
|
9
|
|
|
|
4
|
1
|
9
|
|
length
|
Sets or returns the number of frames in the window
|
4
|
1
|
9
|
|
|
|
4
|
1
|
9
|
|
|
Sets or returns the name of the window
|
4
|
1
|
9
|
|
|
Returns a reference to the window that created the window
|
4
|
1
|
9
|
|
|
Sets or returns the outer height of a window
|
No
|
No
|
No
|
|
|
Sets or returns the outer width of a window
|
No
|
No
|
No
|
|
pageXOffset
|
Sets or returns the X position of the current page in relation
to the upper left corner of a window's display area
|
No
|
No
|
No
|
|
pageYOffset
|
Sets or returns the Y position of the current page in relation
to the upper left corner of a window's display area
|
No
|
No
|
No
|
|
parent
|
Returns the parent window
|
4
|
1
|
9
|
|
personalbar
|
Sets whether or not the browser's personal bar (or directories
bar) should be visible
|
|
|
|
|
scrollbars
|
Sets whether or not the scrollbars should be visible
|
|
|
|
|
|
Returns a reference to the current window
|
4
|
1
|
9
|
|
|
Sets the text in the statusbar of a window
|
4
|
No
|
9
|
|
statusbar
|
Sets whether or not the browser's statusbar should be visible
|
|
|
|
|
toolbar
|
Sets whether or not the browser's tool bar is visible or not
(can only be set before the window is opened and you must have
UniversalBrowserWrite privilege)
|
|
|
|
|
|
Returns the topmost ancestor window
|
4
|
1
|
9
|
Window Object Methods
|
Method
|
Description
|
IE
|
F
|
O
|
|
|
Displays an alert box with a message and an OK button
|
4
|
1
|
9
|
|
|
Removes focus from the current window
|
4
|
1
|
9
|
|
|
Cancels a timeout set with setInterval()
|
4
|
1
|
9
|
|
|
Cancels a timeout set with setTimeout()
|
4
|
1
|
9
|
|
|
Closes the current window
|
4
|
1
|
9
|
|
|
Displays a dialog box with a message and an OK and a Cancel
button
|
4
|
1
|
9
|
|
|
Creates a pop-up window
|
4
|
No
|
No
|
|
|
Sets focus to the current window
|
4
|
1
|
9
|
|
|
Moves a window relative to its current position
|
4
|
1
|
9
|
|
|
Moves a window to the specified position
|
4
|
1
|
9
|
|
|
Opens a new browser window
|
4
|
1
|
9
|
|
|
Prints the contents of the current window
|
5
|
1
|
9
|
|
|
Displays a dialog box that prompts the user for input
|
4
|
1
|
9
|
|
|
Resizes a window by the specified pixels
|
4
|
1
|
9
|
|
|
Resizes a window to the specified width and height
|
4
|
1.5
|
9
|
|
|
Scrolls the content by the specified number of pixels
|
4
|
1
|
9
|
|
|
Scrolls the content to the specified coordinates
|
4
|
1
|
9
|
|
|
Evaluates an expression at specified intervals
|
4
|
1
|
9
|
|
|
Evaluates an expression after a specified number of milliseconds
|
4
|
1
|
9
|
Navigator Object
The Navigator object is actually a JavaScript object, not an HTML DOM object.
The Navigator object is automatically created by the JavaScript runtime engine and contains information
about the client browser.
IE: Internet Explorer, F: Firefox, O: Opera.
Navigator Object Collections
|
Collection
|
Description
|
IE
|
F
|
O
|
|
plugins[]
|
Returns a reference to all embedded objects in the document
|
4
|
1
|
9
|
Navigator Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
|
|
Returns the code name of the browser
|
4
|
1
|
9
|
|
|
Returns the minor version of the browser
|
4
|
No
|
No
|
|
|
Returns the name of the browser
|
4
|
1
|
9
|
|
|
Returns the platform and version of the browser
|
4
|
1
|
9
|
|
|
Returns the current browser language
|
4
|
No
|
9
|
|
|
Returns a Boolean value that specifies whether cookies are
enabled in the browser
|
4
|
1
|
9
|
|
|
Returns the CPU class of the browser's system
|
4
|
No
|
No
|
|
|
Returns a Boolean value that specifies whether the system is in
offline mode
|
4
|
No
|
No
|
|
|
Returns the operating system platform
|
4
|
1
|
9
|
|
|
Returns the default language used by the OS
|
4
|
No
|
No
|
|
|
Returns the value of the user-agent header sent by the client to
the server
|
4
|
1
|
9
|
|
|
Returns the OS' natural language setting
|
4
|
No
|
9
|
Navigator Object Methods
|
Method
|
Description
|
IE
|
F
|
O
|
|
|
Specifies whether or not the browser has Java enabled
|
4
|
1
|
9
|
|
|
Specifies whether or not the browser has data tainting enabled
|
4
|
1
|
9
|
HTML DOM Document Object
Document Object
The Document object represents the entire HTML document and can be used to access all elements in a page.
The Document object is part of the Window object and is accessed through the window.document property.
IE: Internet Explorer, F: Firefox, O:Opera, W3C: World Wide Web Consortium (Internet Standard).
Document Object Collections
|
Collection
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Returns a reference to all Anchor objects in the document
|
4
|
1
|
9
|
Yes
|
|
|
Returns a reference to all Form objects in the document
|
4
|
1
|
9
|
Yes
|
|
|
Returns a reference to all Image objects in the document
|
4
|
1
|
9
|
Yes
|
|
|
Returns a reference to all Area and Link objects in the document
|
4
|
1
|
9
|
Yes
|
Document Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
body
|
Gives direct access to the <body> element
|
|
|
|
|
|
|
Sets or returns all cookies associated with the current document
|
4
|
1
|
9
|
Yes
|
|
|
Returns the domain name for the current document
|
4
|
1
|
9
|
Yes
|
|
|
Returns the date and time a document was last modified
|
4
|
1
|
No
|
No
|
|
|
Returns the URL of the document that loaded the current document
|
4
|
1
|
9
|
Yes
|
|
|
Returns the title of the current document
|
4
|
1
|
9
|
Yes
|
|
|
Returns the URL of the current document
|
4
|
1
|
9
|
Yes
|
Document Object Methods
|
Method
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Closes an output stream opened with the document.open() method,
and displays the collected data
|
4
|
1
|
9
|
Yes
|
|
|
Returns a reference to the first object with the specified id
|
5
|
1
|
9
|
Yes
|
|
|
Returns a collection of objects with the specified name
|
5
|
1
|
9
|
Yes
|
|
|
Returns a collection of objects with the specified tagname
|
5
|
1
|
9
|
Yes
|
|
|
Opens a stream to collect the output from any document.write()
or document.writeln() methods
|
4
|
1
|
9
|
Yes
|
|
|
Writes HTML expressions or JavaScript code to a document
|
4
|
1
|
9
|
Yes
|
|
|
Identical to the write() method, with the addition of writing a
new line character after each expression
|
4
|
1
|
9
|
Yes
|
HTML DOM Form Object
Form Object
The Form object represents an HTML form. For each instance of a <form> tag in an HTML document, a Form object is created.
IE: Internet Explorer, F: Firefox, O:Opera, W3C: World Wide Web Consortium (Internet Standard).
Form Object Collections
|
Collection
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Returns an array containing each element in the form
|
5
|
1
|
9
|
Yes
|
Form Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns a list of possible character-sets for the form
data
|
No
|
No
|
No
|
Yes
|
|
|
Sets or returns the action attribute of a form
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the MIME type used to encode the content of a
form
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns the id of a form
|
5
|
1
|
9
|
Yes
|
|
|
Returns the number of elements in a form
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the HTTP method for sending data to the server
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the name of a form
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns where to open the action-URL in a form
|
5
|
1
|
9
|
Yes
|
Standard Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns the class attribute of an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the direction of text
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the language code for an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns an element's advisory title
|
5
|
1
|
9
|
Yes
|
Form Object Methods
|
Method
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Resets the values of all elements in a form
|
5
|
1
|
9
|
Yes
|
|
|
Submits a form
|
5
|
1
|
9
|
Yes
|
HTML DOM Button Object
Button Object
The Button object represents a push button.For each instance of a
<button> tag in an HTML document, a Button object is created.
IE: Internet Explorer, F: Firefox, O:Opera, W3C: World Wide Web Consortium (Internet Standard).
Button Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns the keyboard key to access a button
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns whether a button should be disabled
|
6
|
1
|
9
|
Yes
|
|
|
Returns a reference to the form that contains the button
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns the id of a button
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns the name of a button
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns the tab order for a button
|
6
|
1
|
9
|
Yes
|
|
|
Returns the type of form element a button is
|
6
|
1
|
9
|
Yes
|
|
|
Sets or returns the text that is displayed on a button
|
6
|
1
|
9
|
Yes
|
Standard Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns the class attribute of an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the direction of text
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the language code for an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns an element's advisory title
|
5
|
1
|
9
|
Yes
|
HTML DOM Text Object
Text Object
The Text object represents a text-input field in an HTML form.
For each instance of an <input type="text"> tag in an HTML form, a Text object is created.
You can access a text-input field by searching through the elements[] array of the form, or by usingdocument.getElementById().
IE: Internet Explorer, F: Firefox, O:Opera, W3C: World Wide Web Consortium (Internet Standard).
Text Object Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns the keyboard key to access a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns an alternate text to display if a browser does
not support text fields
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the default value of a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns whether or not a text field should be disabled
|
5
|
1
|
9
|
Yes
|
|
|
Returns a reference to the form that contains the text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the id of a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the maximum number of characters in a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the name of a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns whether or not a text field should be read-only
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the size of a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the tab order for a text field
|
4
|
1
|
9
|
Yes
|
|
|
Returns the type of form element a text field is
|
4
|
1
|
9
|
Yes
|
|
|
Sets or returns the value of the value attribute of a text field
|
4
|
1
|
9
|
Yes
|
Standard Properties
|
Property
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Sets or returns the class attribute of an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the direction of text
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns the language code for an element
|
5
|
1
|
9
|
Yes
|
|
|
Sets or returns an element's advisory title
|
5
|
1
|
9
|
Yes
|
Text Object Methods
|
Method
|
Description
|
IE
|
F
|
O
|
W3C
|
|
|
Removes focus from a text field
|
4
|
1
|
9
|
Yes
|
|
|
Sets focus on a text field
|
4
|
1
|
9
|
Yes
|
|
|
Selects the content of a text field
|
4
|
1
|
9
|
Yes
|
0 comments:
Post a Comment