SlideShare una empresa de Scribd logo
1 de 20
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,  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.
[object Object],[object Object],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. 
PARTES DEL DHTML Estas son las cuatro partes del html dinamico: ,[object Object],[object Object],[object Object],[object Object]
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.
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.
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>
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.
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 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.
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.
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>
<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>
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.
CARACTERISTICAS DEL DHTML Estas son las características principales del HTML dinámico: ,[object Object],[object Object],[object Object],[object Object]
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>
<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>
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); }
</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>
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.

Más contenido relacionado

La actualidad más candente

Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
duberlisg
 

La actualidad más candente (20)

Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Diapo03
Diapo03Diapo03
Diapo03
 
Html
HtmlHtml
Html
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Lenguaje de marcas html
Lenguaje de marcas htmlLenguaje de marcas html
Lenguaje de marcas html
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Codigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE MéridaCodigos Básicos HTML - IUTE Mérida
Codigos Básicos HTML - IUTE Mérida
 
Hojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - ApuntesHojas de Estilos en Cascada (CSS) - Apuntes
Hojas de Estilos en Cascada (CSS) - Apuntes
 
Etiquetas en Html
Etiquetas en HtmlEtiquetas en Html
Etiquetas en Html
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 

Similar a HTML DINAMICO (20)

Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
Xhtml
XhtmlXhtml
Xhtml
 
Html Bas
Html BasHtml Bas
Html Bas
 
Expo html
Expo htmlExpo html
Expo html
 
Html
HtmlHtml
Html
 
4 Html
4 Html4 Html
4 Html
 
Html
HtmlHtml
Html
 
Codigos HTML Continuación
Codigos HTML ContinuaciónCodigos HTML Continuación
Codigos HTML Continuación
 
html
htmlhtml
html
 
Htm ltlalti
Htm ltlaltiHtm ltlalti
Htm ltlalti
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0Fundamentos HTML - Web 2.0
Fundamentos HTML - Web 2.0
 
Caracteristicas de la web 2.0
Caracteristicas de la web 2.0Caracteristicas de la web 2.0
Caracteristicas de la web 2.0
 
Html1
Html1Html1
Html1
 
Css
CssCss
Css
 
Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4Curso HTML CSS Sesion 2/4
Curso HTML CSS Sesion 2/4
 
Ruiz guerra HTML
Ruiz guerra HTMLRuiz guerra HTML
Ruiz guerra HTML
 
Presentación HTML
Presentación HTMLPresentación HTML
Presentación HTML
 
Present: II WEB DINAMICA Y FORMULARIOS
Present: II  WEB DINAMICA Y  FORMULARIOSPresent: II  WEB DINAMICA Y  FORMULARIOS
Present: II WEB DINAMICA Y FORMULARIOS
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 

Último

EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

HTML DINAMICO

  • 1. DTHML HTML Dinámico Franklin Espitia Amaya Harold Tamayo Acosta
  • 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.
  • 4.
  • 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. 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. 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. 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. EJEMPLO <html> <body> <script type=&quot;text/javascript&quot;> document.write(Date()); </script> </body> </html>
  • 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. 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. 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. <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. 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.
  • 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. <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. 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. </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. 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.