Sunday, November 18, 2012

Dynamic HTML

Dynamic HTML

NOTE: This article was written in 1997 before the release of Internet Explorer 4.0
Dynamic HTML has become a big issue. Everyone is talking about it. This page provides a brief detail of

What is Dynamic HTML?

Dynamic HTML are what Microsoft and Netscape claims to be a new effective way to make web pages more interactive. Both Microsoft and Netscape share the same concept but they use slightly different ways to accomplish this concept. Netscape offers <LAYER> tag incorporated with JavaScript and Style Sheets as the way to get control on positioning, while Microsoft use ActiveX and CSS Style Sheets incorporated with scripting language like JScript (Microsoft's version of JavaScript) or VBScript to control positioning. Both share the same concept of positioning in which the coordinates x, y, and z can be specified. Z (z-axis) will allow designers to define the order of elements -- in front of or behind other object. Designers now can get control over the positioning.

Microsoft's Dynamic HTML

Microsoft will have Dynamic HTML feature attached in their Internet Explorer 4.0. Key features of Microsoft's Dynamic HTML are: Cascading Style Sheets, Document Object Model (DOM), and Data Binding.
Another core feature is "Data Binding", which reduce the process that were previously done on a server. The use of CGI will be decreased. Good news or bad news? This is accomplished by using built-in data binding.Dynamic HTML data awareness is implemented using an open architecture. Within each data-aware page is a data source control. A data source control is an invisible ActiveX Control that knows how to communicate with a data source (e.g., database). Dynamic HTML intrinsically understands how to bind HTML elements to fields in the data source control. Dynamic HTML will include three data source controls to access comma-delimited data in files, SQL data in Microsoft SQL Server™ and other open database connectivity (ODBC) sources, and Java database connectivity (JDBC) data sources. ActiveX Control and Java Applet developers can implement additional data source controls to communicate with other data sources.

Netscape's Dynamic HTML

Netscape's concept is to change current web pages into rich interactive document. It relies mostly on <LAYER> tag, which allow you to get control over positioning. Layers can be opaque or transparent. One layer can be placed above or below another layer. It also can be moved around by help of JavaScript and Style Sheets. Please note that unlike Internet Explorer4.0 who support Cascading Style Sheets, Netscape Communicator supports two types of style sheets: Cascading Style Sheets (CSS) and JavaScript style sheets (JASS). There is no doubt that Netscape is fully using its JavaScript at this time.
Netscape also offers "Dynamic Fonts". You can send the font with the document, and visitors of your pages will see those fonts on your pages even they don't have those fonts installed in their machine. Cool, huh? To see the example, click here.
If you are designing web pages, you should now have Navigator4.0 on your machine. You may now see the use of <LAYER> tag on some sites (If you haven't seen any yet, here is the link).

To learn how to incorporate <LAYER> into your document visit:

Links for further reading

Conclusion

It is clear that CSS (Cascading Style Sheets) is the save way to play with Dynamic HTML because it is supported by two major browsers. If you don't know how to deal with CSS, visit Style Sheets page on this site. There is an easy tutorial for you.
It depends on you what standard you will follow. My comment is the competition will continue. Most people will implement CSS rather than create three versions of web site: one supports old browser, one supports IE4.0, and one support Navigator4.0.

Links for further information

Posted by at No comments:
Labels:

HTML Codes and Tags

HTML Codes

Name
HTML Tag
HTML Code Example
Browser View
HTML Comment <!-- <!--This can be viewed in the HTML part of a document--> Nothing will show (Tip)
HTML Anchor <a> <a href="http://www.domain.com/">
Visit Our Site</a>		 Visit Our Site (Tip)
HTML Bold <b> <b>Example</b> Example
HTML Big (Text) <big> <big>Example</big> Example (Tip)
Body of HTML Document <body> <body>The content of your HTML page</body> Contents of your web page (Tip)
HTML Line Break <br> The contents of your page<br>The contents of your page The contents of your page
The contents of your page
HTML Center <center> <center>This will center your contents</center>
This will center your contents
HTML Definition Description <dd> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Definition List <dl> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Definition Term <dt> <dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Emphasis <em> This is an <em>Example</em> of using the emphasis tag This is an Example of using the emphasis tag
HTML Embed Object <embed>
 <embed src="yourfile.mid" width="100%" height="60" align="center">
(Tip)
HTML Embed Object <embed> <embed src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>

Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.
HTML Font <font> <font face="Times New Roman">Example</font> Example (Tip)
HTML Font <font> <font face="Times New Roman" size="4">Example</font> Example (Tip)
HTML Font <font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font> Example (Tip)
HTML Form <form> <form action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
Name: (Tip)
Email:

Name
HTML Tag
HTML Code Example
Browser View
HTML Heading 1
HTML Heading 2
HTML Heading 3
HTML Heading 4
HTML Heading 5
HTML Heading 6		 <h1>
<h2>
<h3>
<h4>
<h5>
<h6>		 <h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>

Heading of HTML Document <head> <head>Contains elements describing the document</head> Nothing will show
HTML Horizontal Rule <hr> <hr />
Contents of your web page (Tip)
Contents of your web page
HTML Horizontal Rule <hr> <hr width="50%" size="3" /> Contents of your web page
Contents of your web page
HTML Horizontal Rule <hr> <hr width="50%" size="3" noshade /> Contents of your web page
Contents of your web page
HTML Horizontal Rule <hr>
(Internet
Explorer)		 <hr width="75%" color="#ff0000" size="4" /> Contents of your web page
Contents of your web page
HTML Horizontal Rule <hr>
(Internet
Explorer)		 <hr width="25%" color="#6699ff" size="6" /> Contents of your web page
Contents of your web page
HTML Hypertext Markup Language <html> <html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>		 Contents of your web page
HTML Italic <i> <i>Example</i> Example
HTML Image <img> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> a sentence about your site (Tip)
HTML Input Field <input> Example:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
HTML Input Password <input> <form method=post action="/cgi-bin/example.cgi">
<input type="password" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
HTML Input
(Background Color) 		<input>
(Internet Explorer)		 Example:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
HTML Input
(Image Submit Button) 		<input> Example:

<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table>
</form>
Example: (Tip)
HTML Input
(Comment Box) 		<input> Example:

<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example: (Tip)
HTML Input
(Radio Button)
<input> Example:

<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<input type="Submit" value="Submit">
</form>
Example: (Tip)

Select an option:
Option 1
Option 2
Option 3
HTML Input
(Checkbox) 		<input> Example:

<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example: (Tip)

Select an option:
Selection 1
Selection 2
Selection 3
HTML List Item <li> Example 1:

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>

Example 2:

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>		 Example 1: (Tip)
  • List item 1
  • List item 2
  • List item 3

Example 2:

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
HTML Link <link> <head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
HTML Scrolling Text <marquee>
(Internet
Explorer)		 <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee> Example Marquee (Tip)
HTML Menu <menu> <menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
  • List item 1
  • List item 2
  • List item 3
HTML Meta <meta> <meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">		 Nothing will show (Tip)
HTML Meta <meta> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show (Tip)
HTML Meta <meta> <meta http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)
HTML Meta <meta> <meta name="rating" content="General"> Nothing will show (Tip)
HTML Meta <meta> <meta name="robots" content="all"> Nothing will show (Tip)
HTML Meta <meta> <meta name="robots" content="noindex,follow"> Nothing will show (Tip)
Name
HTML Tag
HTML Code Example
Browser View
HTML Ordered List <ol> Numbered

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered Special Start

<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Letters <ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters Special Start
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Roman Numerals
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals
<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals Special Start
<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>		 Numbered
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Numbered Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Lowercase Letters

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Capital Letters

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Capital Letters Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Lowercase Roman Numerals

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Capital Roman Numerals

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Capital Roman Numerals Special Start

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
HTML Listbox Option (Drop Down Box)
<option> <form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
Select an option: (Tip)
HTML Mailto Email Link <a> <a href="mailto:you@yourdomain.com">Email Link</a> Email Link
HTML Paragraph <p> This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.

Attributes:

<p align="left">
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="center">
Example 3:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
This is an example displaying the use of the HTML paragraph tag.
This will create a line break and a space between lines.

Attributes:
Example 1:

This is an example
displaying the use
of the paragraph tag.
Example 2:

This is an example
displaying the use
of the paragraph tag.
Example 3:

This is an example
displaying the use
of the paragraph tag.
HTML Small (Text) <small> <small>Example</small> Example (Tip)
HTML Deleted Text <strike> <strike>Example</strike> Example
HTML Strong <strong> <strong>Example</strong> Example
HTML Table <table> Example 1:

<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
 Example 1: (Tip)
Column 1 Column 2

Example 2: (Tip)

Column 1 Column 2

Example 3: (Tip)

Column 1 Column 2
Row 2 Row 2
HTML Table Data <td> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Column 1 Column 2
HTML Table Header <th> <div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
Column 1 Column 2 Column 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4
HTML Document Title <title> <title>Title of your HTML page</title> Title of your web page will be viewable in the title bar. (Tip)
HTML Table Row <tr> <table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Column 1 Column 2
HTML Teletype <tt> <tt>Example</tt> Example
HTML Underline <u> <u>Example</u> Example
HTML Unordered List <ul> Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>		 Example 1:

  • List item 1
  • List item 2

Example 2:

  • List item 1
  • List item 2
    • List item 3
    • List item 4

Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)