{"id":31888,"date":"2024-11-12T12:39:23","date_gmt":"2024-11-12T12:39:23","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31888"},"modified":"2025-03-18T14:07:56","modified_gmt":"2025-03-18T14:07:56","slug":"DHTML","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/DHTML","title":{"rendered":"DHTML"},"content":{"rendered":"

\u00bfQu\u00e9 es DHTML?<\/span><\/h2>\n

DHTML (del ingl\u00e9s Dynamic HyperText Markup Language) es una combinaci\u00f3n de los lenguajes de programaci\u00f3n usados para desarrollar p\u00e1ginas web interactivas, a saber: HTML5<\/a>, CSS, JavaScript<\/a> y DOM. Aunque existen otras tecnolog\u00edas que pueden sustituir a algunos de ellos.\n<\/p>\n

El t\u00e9rmino DHTML se introdujo por primera vez en 1997 y generalmente se considera obsoleto en la actualidad. En su lugar, se emplean las expresiones \u00abDOM-scripting\u00bb y \u00abJavascript discreto\u00bb.\n<\/p>\n

Usos de DHTML<\/span><\/h2>\n

El DHTML se utiliza generalmente para crear efectos en las p\u00e1ginas, como peque\u00f1as animaciones y botones o men\u00fas interactivos. Por ejemplo, se puede emplear para animar un men\u00fa desplegable o mover im\u00e1genes y texto en un website. Incluso, en el pasado se desarrollaron juegos aprovechando este conjunto de programas.\n<\/p>\n

\u00bfQu\u00e9 elementos incluye el DHTML?<\/span><\/h2>\n

El DHTML habitualmente consta de cuatro elementos, a saber: HTML, CSS, Javascript y DOM. A continuaci\u00f3n, se muestra un resumen de las funciones que cumple cada uno de ellos.\n<\/p>\n

HTML<\/span><\/h3>\n

El t\u00e9rmino HTML deriva de las siglas de HyperText Markup Language o lenguaje de marcado de hipertexto en espa\u00f1ol. Generalmente es empleado para crear la estructura y el dise\u00f1o de las p\u00e1ginas web. Se invent\u00f3 en 1991 y la versi\u00f3n m\u00e1s actualizada HTML5.2 ha estado disponible desde el 2017.\n<\/p>\n

El HTML trabaja con varios elementos, cada uno de los cuales se usa para un tipo de contenido diferente. Por ejemplo, la etiqueta <h> indica que la primera l\u00ednea de una p\u00e1gina es el encabezado, mientras que la etiqueta <p> se\u00f1ala que los bloques de texto forman un p\u00e1rrafo.\n<\/p>\n

CSS<\/span><\/h3>\n

El CSS es un lenguaje que le indica al navegador c\u00f3mo se debe mostrar el HTML en una p\u00e1gina determinada, mejorando as\u00ed la flexibilidad del dise\u00f1o de los sitios web. El t\u00e9rmino proviene de la frase en ingl\u00e9s Cascading Style Sheets, que significa hojas de estilo en cascada.\n<\/p>\n

Este lenguaje permite que los cambios se muestren en todo el sitio web. Por ejemplo, se puede usar un archivo externo para especificar la fuente, el color de fondo y muchos otros par\u00e1metros del sitio. Antes de su implementaci\u00f3n, estos cambios deb\u00edan realizarse p\u00e1gina por p\u00e1gina.\n<\/p>\n

Javascript<\/span><\/h3>\n

Javascript es un lenguaje de secuencias de comandos que hace posible que las y los usuarios interact\u00faen con una p\u00e1gina web. Se emplea para actualizar autom\u00e1ticamente las fuentes de noticias y conseguir que elementos como formularios de contacto y botones funcionen en una web.\n<\/p>\n

Es un lenguaje extremadamente din\u00e1mico, sin embargo, puede causar problemas a las ara\u00f1as web<\/a> si no est\u00e1 correctamente optimizado, pudiendo perjudicar el rendimiento del sitio en los buscadores<\/a>.\n<\/p>\n

DOM<\/span><\/h3>\n

DOM son las siglas de modelo de objeto de documento traducido en ingl\u00e9s, Document Object Model y describe las propiedades de todos los elementos HTML y c\u00f3mo se puede acceder a ellos. Se emplea para dinamizar el HTML al permitir su cambio mediante el uso de Javascript. Igualmente, permite modificar el CSS en una p\u00e1gina, entre otras posibles aplicaciones.\n<\/p>\n

Ejemplo<\/span><\/h2>\n

En el siguiente ejemplo, JavaScript se usa para escribir el texto \u00abTexto de ejemplo\u00bb en el cuerpo de una p\u00e1gina HTML:[1]<\/a><\/sup>\n<\/p>\n

<html>  \r\n<head>  \r\n<title>DHTML con JavaScript<\/title>  \r\n<\/head>  \r\n<body>  \r\n<script type=\"text\/javascript\">  \r\ndocument.write(\"Texto de ejemplo\");  \r\n<\/script>  \r\n<\/body>  \r\n<\/html>  \r\n<\/pre>\n
En este otro ejemplo de c\u00f3digo JavaScript se emplea CSS para cambiar el estilo del encabezado h1:\n<\/p>\n
<html>  \r\n<head>  \r\n<title>DHTML con CSS<\/title>  \r\n<\/head>  \r\n<body>  \r\n<center>  \r\n<h1 onclick=\"this.style.color='blue'\">Este es un encabezado h1<\/h1>  \r\n<center>  \r\n<\/body>  \r\n<\/html>  \r\n<\/pre>\n
Diferencia entre HTML y DHTML<\/span><\/h2>\n
La principal diferencia entre el HTML y el DHTML es que el primero es un lenguaje, mientras que el segundo se trata de un t\u00e9rmino empleado para referirse a un grupo de lenguajes de programaci\u00f3n.\n<\/p>\n
Usando HTML, una desarrolladora o un desarrollador puede crear una p\u00e1gina est\u00e1tica que constituye la estructura de un sitio web, sin embargo requiere del uso de otras tecnolog\u00edas para hacer que dicha p\u00e1gina sea din\u00e1mica y funcional.\n<\/p>\n
DHTML se aprovecha para generar p\u00e1ginas web din\u00e1micas, ya que abarca todas las tecnolog\u00edas necesarias para hacerlo. Esto permite una mayor flexibilidad al crear p\u00e1ginas web.\n<\/p>\n
Importancia del DHTML para el SEO<\/span><\/h2>\n
Al comprender los diferentes elementos, las mejores pr\u00e1cticas y asegurarse de que las funciones que se utilizan sean compatibles con los navegadores m\u00e1s importantes, el rendimiento de un sitio puede mejorarse con DHTML.\n<\/p>\n
Adem\u00e1s, el uso incorrecto de cualquiera de los elementos utilizados en los sitios DHTML tambi\u00e9n puede causar problemas con la experiencia de usabilidad<\/a>. Por ejemplo, un sitio puede volverse lento o ciertos recursos pueden mostrarse de forma incorrecta.\n<\/p>\n
Dado que el DHTML aprovecha al Javascript, hay que velar porque este \u00faltimo sea implementado de manera correcta. En caso contrario, podr\u00eda afectar<\/b> el funcionamiento de las ara\u00f1as web, lo que atenta contra<\/b> el rendimiento del website en las SERPs<\/a>.\n<\/p>\n
Referencias<\/span><\/h2>\n
    \n
  1. \u2191<\/a><\/span> Tutorial DHTML<\/a> JavaTpoint. Consultado el 16.07.21.<\/span>\n<\/li>\n<\/ol>\n
    Ampliar conocimientos<\/span><\/h2>\n