DTHML HTML Dinámico Franklin Espitia Amaya Harold Tamayo Acosta
DHTML Dynamic Html   DHTML abarca muchas áreas con respecto al diseño de páginas, al hablar de html dinámico ó DHMTL,  dec...
<ul><li>  </li></ul><ul><li>  </li></ul>El HTML dinámico no es realmente una nueva especificación de HTML, pero contiene n...
PARTES DEL DHTML Estas son las cuatro partes del html dinamico: <ul><ul><li>DOM (Document Object Model) </li></ul></ul><ul...
DOM  (Document Object Model) El DOM es aquello que permite un acceso más fácil a cualquier parte de la página web permitie...
Gracias al DOM se hace más fácil la construcción de documentos web, se puede navegar con mayor facilidad debido a la estru...
EJEMPLO <html> <body> <h1 id=&quot;header&quot;>Old Header</h1> <script type=&quot;text/javascript&quot;> document.getElem...
SCRIPTS Los scripts están escritos en dos formas o tipos, JavaScripts y Activex y son las secuencias de comandos más comun...
EJEMPLO <html> <body> <script type=&quot;text/javascript&quot;> document.write(Date()); </script> </body> </html>
CSS (Hojas de Estilo en Cascada) Las CSS son usadas en DHTML para controlar el aspecto de las páginas web. Las hojas de es...
Son un simple mecanismo para adicionar estilos para documentos web en HTML y XHTML, como por ejemplo adicionar estilos en ...
EJEMPLO <html> <body> <h1 id=&quot;header&quot; onclick=&quot;this.style.color='red'&quot;>Click ME!</h1> <p>If you click ...
<html> <body> <p id=&quot;p1&quot;>hello world.<br /> again HELLO WORLD'</p> <input type=&quot;button&quot; value=&quot;Hi...
XHTML XHTML o HTML es usado para crear las páginas propias y construir los elementos  para las CSS y el DOM a trabajar. No...
CARACTERISTICAS DEL DHTML Estas son las características principales del HTML dinámico: <ul><ul><li>Cambio de etiquetas y p...
EJEMPLO DE DHTML <html> <head> <script type=&quot;text/javascript&quot;> function bgChange(bg) { document.body.style.backg...
<table width=&quot;300&quot; height=&quot;100&quot;>  <tr>   <td onmouseover=&quot;bgChange('red')&quot;        onmouseout...
EJEMPLO <html> <head> <script> function startEQ() { richter=5; parent.moveBy(0,richter); parent.moveBy(0,-richter); parent...
</script> </head> <body> <form> <input type=&quot;button&quot; onclick=&quot;startEQ()&quot; value=&quot;Start an earthqua...
CONCLUSIONES Gracias a las diferentes herramientas que nos ofrece el HTML dinamico, podemos obtener en el momento de la cr...
Upcoming SlideShare
Loading in …5
×

HTML DINAMICO

6,463 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,463
On SlideShare
0
From Embeds
0
Number of Embeds
285
Actions
Shares
0
Downloads
138
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML DINAMICO

  1. 1. DTHML HTML Dinámico Franklin Espitia Amaya Harold Tamayo Acosta
  2. 2. DHTML Dynamic Html   DHTML abarca muchas áreas con respecto al diseño de páginas, al hablar de html dinámico ó DHMTL,  decimos que es un conjunto de tecnologías aplicadas al diseño de páginas, cuyo contenido sea lo más dinámico posible, en donde se refleje lo interactivo y las animaciones web, combinando lenguajes que van aportando a la construccion del html dinámico tales como: HTML, JAVASCRIPT, seguido de las CSS y finalmente el DOM.
  3. 3. <ul><li>  </li></ul><ul><li>  </li></ul>El HTML dinámico no es realmente una nueva especificación de HTML, pero contiene nuevos caminos de mirar y controlar los códigos y comando estandar de HTML. Cuando pensamos en HTML dinámico, es necesario recordar la calidad del estándar HTML, especialemente la forma como las páginas son cargadas desde el servidor, y que a la hora de implementarlo no es necesario tener muchos requerimientos para poderlo manejar mediante el servidor.   El DHTML proporciona mas control sobre los elementos html, y me permite realizar cambios en cuanlquier momento. 
  4. 4. PARTES DEL DHTML Estas son las cuatro partes del html dinamico: <ul><ul><li>DOM (Document Object Model) </li></ul></ul><ul><ul><li>SCRIPTS </li></ul></ul><ul><ul><li>CSS (Hojas de estilo en Cascada </li></ul></ul><ul><ul><li>XHTML </li></ul></ul>
  5. 5. DOM (Document Object Model) El DOM es aquello que permite un acceso más fácil a cualquier parte de la página web permitiendo así hacer cualquier cambio utilizando DHMTL. Cada parte de la página web está especificada por el DOM y usando sus consitencias y convenciones, se puede acceder y cambiar cualquier propiedad de la página.
  6. 6. Gracias al DOM se hace más fácil la construcción de documentos web, se puede navegar con mayor facilidad debido a la estructura con la que esta hecha, y hacer las debidas modificacions o adiciones de una manera mas sencilla. El objetivo principal del DOM es generar un estilo estándar de diseño que permita la utilización en diferentes entornos y aplicaciones.
  7. 7. EJEMPLO <html> <body> <h1 id=&quot;header&quot;>Old Header</h1> <script type=&quot;text/javascript&quot;> document.getElementById(&quot;header&quot;).innerHTML=&quot;New Header&quot;; </script> </body> </html>
  8. 8. SCRIPTS Los scripts están escritos en dos formas o tipos, JavaScripts y Activex y son las secuencias de comandos más comunes que se utilizan para la activación del DHMTL. Puede utilizar un lenguaje SCRIPTING para controlar los objetos que se especifican a través del DOM.
  9. 9. EJEMPLO <html> <body> <script type=&quot;text/javascript&quot;> document.write(Date()); </script> </body> </html>
  10. 10. CSS (Hojas de Estilo en Cascada) Las CSS son usadas en DHTML para controlar el aspecto de las páginas web. Las hojas de estilo definen el color y la forma de los textos, el color de los fondos y las imágenes, y la ubicación de los objetos en la pagina web. Por medio de los SCRIPTS y del DOM podemos cambiar el estilo de varios elementos.
  11. 11. Son un simple mecanismo para adicionar estilos para documentos web en HTML y XHTML, como por ejemplo adicionar estilos en fuentes colores, espacios y otros aspectos en la presentación del documento. Esta diseñado primordialmente para habilitar la separación del contenido de los documentos. Esta separación puede ayudar a tener una mejor accesibilidad, flexibilidad y un control en la especificación de las características de la presentación.
  12. 12. EJEMPLO <html> <body> <h1 id=&quot;header&quot; onclick=&quot;this.style.color='red'&quot;>Click ME!</h1> <p>If you click the header above, it turns red.</p> </body> </html>
  13. 13. <html> <body> <p id=&quot;p1&quot;>hello world.<br /> again HELLO WORLD'</p> <input type=&quot;button&quot; value=&quot;Hide text&quot; onclick=&quot;document.getElementById('p1').style.visibility='hidden'&quot; /> <input type=&quot;button&quot; value=&quot;Show text&quot; onclick=&quot;document.getElementById('p1').style.visibility='visible'&quot; /> </body> </html>
  14. 14. XHTML XHTML o HTML es usado para crear las páginas propias y construir los elementos  para las CSS y el DOM a trabajar. No hay nada en especial acerca de XHTML dirigido a DHTML, pero teniendo valido el XHTML es más importante, a raíz de que hay más opciones de trabajo aparte de las que me ofrece el navegador.
  15. 15. CARACTERISTICAS DEL DHTML Estas son las características principales del HTML dinámico: <ul><ul><li>Cambio de etiquetas y propiedades </li></ul></ul><ul><ul><li>Posicionamiento en tiempo real </li></ul></ul><ul><ul><li>Fuentes dinámicas (Netscape Comunicator) </li></ul></ul><ul><ul><li>Enlace de datos (Internet Explorer) </li></ul></ul>
  16. 16. EJEMPLO DE DHTML <html> <head> <script type=&quot;text/javascript&quot;> function bgChange(bg) { document.body.style.background=bg; } </script> </head> <body> <b>Mouse over the squares and the background color will change!</b>
  17. 17. <table width=&quot;300&quot; height=&quot;100&quot;>  <tr>   <td onmouseover=&quot;bgChange('red')&quot;       onmouseout=&quot;bgChange('transparent')&quot;       bgcolor=&quot;red&quot;>   </td>   <td onmouseover=&quot;bgChange('blue')&quot;       onmouseout=&quot;bgChange('transparent')&quot;       bgcolor=&quot;blue&quot;>   </td>   <td onmouseover=&quot;bgChange('green')&quot;       onmouseout=&quot;bgChange('transparent')&quot;       bgcolor=&quot;green&quot;>   </td> </tr> </table> </body> </html>
  18. 18. EJEMPLO <html> <head> <script> function startEQ() { richter=5; parent.moveBy(0,richter); parent.moveBy(0,-richter); parent.moveBy(richter,0); parent.moveBy(-richter,0); timer=setTimeout(&quot;startEQ()&quot;,10); } function stopEQ() { clearTimeout(timer); }
  19. 19. </script> </head> <body> <form> <input type=&quot;button&quot; onclick=&quot;startEQ()&quot; value=&quot;Start an earthquake&quot;> <br /> <br /> <input type=&quot;button&quot; onclick=&quot;stopEQ()&quot; value=&quot;Stop the earthquake&quot;> </form> </body> </html>
  20. 20. CONCLUSIONES Gracias a las diferentes herramientas que nos ofrece el HTML dinamico, podemos obtener en el momento de la creación de sitios web o aplicaciones resultados sorprendentes. Podemos implementar todas las herramientas que nos ofrece y construir un sitio dinámico, que motive al usuario a explorar y explorar utilizando cada espacio del sitio.

×