Download
1 / 13
130 likes | 142 Views
Learn about DHTML, CSS2 advantages, embedding styles, and dynamic content for creating interactive web pages across browsers with examples and explanations.
E N D
What is it? • Dynamic HTML. • Not a standard unlike HTML or Java • It is a term applied by both Netscape and Microsoft to a collection of technologies that they are developing for making HTML documents more dynamic and interactive.
DHTML features • Style sheets • Content positioning • DOM
Style sheets • A web page has two component: • Content • Presentation • Style sheets are used to specify the presentation part of the web page. • They are collection of style information that are applied to plain text. Style information include special effects(bold, italics, underline), color and alignment. • CSS2 – W3C
Advantage • Standardizing the styles for all pages by making a common file that will store all style information. • Content can be written without worrying much about the rendering. • Some tags like <EM> is rendered in different browsers in a different way. Using style sheets, a web designer can be sure that their content will look the same on every browser.
Three ways to include style • Embedded style • Inline style • Linked styles Setting up style info- an example Microsoft way BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in } H1 { font: 18 pt Arial; color: red }
Embedded style : <Style> tag <html><head> <style type="text/css"> BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in} H1 { font: 18 pt Arial; color: red} </style> </head> <body> <h1>Dynamic Web Pages</h1> The need of dynamic web pages; an overview of DHTML, cascading style sheet, comparative studies of different technologies of dynamic page creation </body></html>
Inline style <table style="font: 12 pt Arial; color: green; font-weight: bold"> <tr><td>Name</td><td>Reg No. </td></tr> <tr><td>XXXX</td><td>55555</td></tr> </table>
Linked style BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in} H1 { font: 18 pt Arial; color: red} style.css • Linking to a style info in a separate file. <html><head> <link rel=stylesheet href=style.css> </head> <body><h1>Dynamic Web Pages</h1> The need of dynamic web pages; an overview of DHTML,cascading style sheet, comparative studies of different technologies of dynamic page creation </body></html>
Cross-browser style <html> <head> <STYLE TYPE="text/css"> .myclass { font-size: 20pt; color: red; font-family: Arial; } </STYLE> </head> <body> <h1>Dynamic Web Pages</h1> <P CLASS="myclass"> The need of dynamic web pages; an overview of DHTML, cascading style sheet, comparative studies of different technologies of dynamic page creation </P> </body> </html>
Content positioning with Netscape’s- Layer • <LAYER> and <ILAYER> tags are used for positioning HTML elements. • <LAYER> tag defines layers that are absolutely positioned; <ILAYER> tag define layers that are positioned relative to where they would otherwise have appeared in the html document.
<html<body> <center> <ILAYER Z-INDEX=1> <img src=java.gif width=450 height=335 border=0> </ILAYER> <LAYER PAGEX=100 PAGEY=100 Z-INDEX=2> <img src=java.gif width=450 height=150 border=0> </LAYER> <LAYER PAGEX=300 PAGEY=150 Z-INDEX=3> <font face=Arial size=20 color=green>Yes!</font> </LAYER> </center> </body> </html>
Dynamic contentMicrosoft way <html> <head> <title>inner html</title> <script> function change() { t.innerHTML="See the title changed"; } </script> </head> <body> <h1 id="t">Dynamic Web Pages</h1> <input type=button onClick="change()"> </body> </html>
