After Web page loads, it looks the same and never changes.
After loading the Web page can change itself!Dynamic HTML today means
- It can react to user events (e.g., mouse clicks)
- It can implement a user interface without server interaction
HTML + Style Sheets + Scripting + DOMDOM = Document Object Model
DOM is a way to refer to any tag within HTML doc to permit modification via scripting
Tables attached to database; automatically update as database changes
Fonts are in vector format. So they take less space than bitmaps.
Suppose box is defined as<body> <p>Beginning of body contents. <span id=box> Start of inner content.</span> End of body contents. </p> </body>
#box {position:absolute; top: 200px; left: 200 px}
HTML above produces something like this (click here
to view result):
(0,0) (400,0) +---------doc window---------------+ |Beginning of body contents. End | |of body contents. | | | | | | | | +-----------------+| | |Start of inner || | |box contents. || | +-----------------+| | | | | +---------doc window---------------+ (0,400) (400,400)
#box {position:absolute; top: 2px; left: 2 px; color: blue; font-size: 36pt}Click here to see the result. Note: HTML was modified to use '<p style="font-size: 36pt">' to emphasize which text is on top.
The HTML tags form a document tree like this:
So you can refer hierarchically to an element in the HTML document
like this:
document.images.button1And you can refer to an attribute of an element like this:
document.images.button1.srcYou can change the value of an attribute in response to various event handlers:
<html>
<title>Example of document object model</title>
<body>
<p>Move the mouse over the image below, and you will see a second image appear!
</p>
<a href="next.html" onMouseOver="document.images.button1.src='click.gif'">
<img src="click2.gif" NAME="button1">
</body>
</html>