HTML - de Cero a Profesional

Contenido HTML Avanzado

Incorporación de contenido incrustado: iframes, objetos, y elementos embed

iframes (marcos internos):

  • Los iframes son elementos HTML que te permiten incrustar otro documento HTML dentro de tu página web.
  • Se utilizan comúnmente para mostrar contenido de otras páginas web, como vídeos de YouTube, mapas de Google, widgets de redes sociales, entre otros.
  • Puedes especificar la URL del documento que deseas incrustar utilizando el atributo src del iframe.
				
					<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Objetos:

  • Los objetos HTML te permiten incrustar contenido multimedia, como vídeos, audio, documentos PDF y aplicaciones interactivas, dentro de tu página web.
  • Utilizas la etiqueta <object> y especificas la URL del archivo que deseas incrustar utilizando el atributo data.
				
					<object data="miarchivo.pdf" type="application/pdf" width="100%" height="600px">
   <p>Lo siento, tu navegador no puede mostrar este archivo PDF. Puedes <a href="miarchivo.pdf">descargarlo aquí</a> en su lugar.</p>
</object>

Elementos embed:

  • Los elementos embed son otra forma de incrustar contenido multimedia, como vídeos y animaciones, dentro de tu página web.
  • Utilizas la etiqueta <embed> y especificas la URL del archivo multimedia que deseas incrustar utilizando el atributo src.
				
					<embed src="mianimacion.swf" width="550" height="400">

Uso de caracteres especiales y entidades HTML

  1. Caracteres especiales:

    • Los caracteres especiales son aquellos que tienen un significado especial en HTML y pueden afectar la interpretación del código.
    • Algunos ejemplos comunes de caracteres especiales son <, >, &, ", ' y ©.
    • Si deseas mostrar estos caracteres en tu página web sin que se interpreten como parte del código HTML, es necesario usar entidades HTML.

  2. Entidades HTML:

    • Las entidades HTML son secuencias de caracteres que representan caracteres especiales en HTML.
    • Se componen de un ampersand (&), seguido de un nombre o número de referencia y terminan con un punto y coma (;).
    • Por ejemplo, &lt; representa el símbolo <, &gt; representa >, &amp; representa &, &quot; representa ", &apos; representa ', y &copy; representa el símbolo de copyright ©.

  3. Uso práctico:

    • Cuando necesitas mostrar un signo de menor que <, debes usar &lt;.
    • Para mostrar un signo de mayor que >, debes usar &gt;.
    • Si quieres incluir un ampersand & literal, debes usar &amp;.
    • Para mostrar comillas dobles ", debes usar &quot;.
    • Y si necesitas mostrar una comilla simple ', puedes usar &apos;.
    • Además, para mostrar el símbolo de copyright ©, puedes usar &copy;.
				
					<!-- Ejemplo de uso de entidades HTML -->
<p>Los caracteres &lt;, &gt;, &amp;, &quot;, &apos;, y &copy; son ejemplos de caracteres especiales en HTML.</p>

  1. Compatibilidad y mantenimiento:

    • Es importante utilizar entidades HTML en lugar de caracteres especiales directamente en tu código HTML para garantizar la compatibilidad con diferentes navegadores y evitar posibles problemas de interpretación.
    • Además, el uso de entidades HTML hace que tu código sea más legible y mantenible para otros desarrolladores que puedan revisarlo en el futuro.

Uso de caracteres especiales y entidades HTML

¿Qué es el DOM?:

      • El DOM es una representación en forma de árbol de la estructura de un documento HTML.
      • Cada elemento HTML, atributo y texto dentro del documento es representado por un nodo en el árbol del DOM.

    2. Manipulación del DOM con JavaScript:

      • JavaScript proporciona métodos y propiedades para acceder, modificar y manipular el contenido del DOM.
      • Puedes seleccionar elementos del DOM utilizando métodos como document.getElementById(), document.getElementsByClassName(), document.querySelector(), entre otros.
      • Una vez seleccionado un elemento, puedes modificar su contenido, atributos o estilos utilizando propiedades como innerHTML, textContent, setAttribute(), style, entre otros.

    3. Ejemplo práctico:

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulación del DOM</title>
</head>
<body>
    <h1 id="titulo">Hola, Mundo!</h1>
    <button onclick="cambiarTexto()">Cambiar Texto</button>

    <script>
        function cambiarTexto() {
            // Seleccionar el elemento h1 con el id 'titulo'
            var titulo = document.getElementById('titulo');
            
            // Modificar el contenido del elemento
            titulo.innerHTML = '¡Hola, Mundo modificado!';
        }
    </script>
</body>
</html>

En este ejemplo, al hacer clic en el botón «Cambiar Texto», se ejecuta la función cambiarTexto(), que selecciona el elemento <h1> con el id ‘titulo’ y modifica su contenido utilizando la propiedad innerHTML.

      1. Otros métodos de manipulación del DOM:

        • Además de modificar el contenido HTML, JavaScript también te permite añadir, eliminar y manipular elementos del DOM dinámicamente.
        • Puedes utilizar métodos como createElement(), appendChild(), removeChild(), classList y más para realizar estas operaciones.

Recursos