Hoy veremos una etiqueta en HTML que es muy útil.
Y no estoy diciendo que las demás etiquetas no lo sean, pero sí es verdad que las últimas etiquetas que hemos visto en el canal eran un poco extrañas.
Bueno, la verdad es que eran bastante raras.
Así que hoy toca hablar de la etiqueta EMBED, una etiqueta que seguramente utilizarás bastante en tus proyectos.
Y presta atención, porque esta etiqueta tiene muchos usos, no solamente sirve para hacer una cosa, se pueden hacer unas cuantas. Así que, sin más… iVamos al lío!
Te recuerdo que también puedes consultar el diccionario HTML del canal, para ampliar tus conocimientos.
Qué es EMBED en HTML y para que se usa
La etiqueta <embed> en HTM se usa para incrustar contenido externo en una página web o en cualquier documento HTML.
Los usos más comunes de esta etiqueta son:
- Incrustar elementos, como por ejemplo vídeo y audio.
- Incrustar documentos PDF
- Añadir aplicaciones y juegos flash
- Añadir contenido interactivo, como por ejemplo un mapa.
Además, lo bueno que tiene esta etiqueta es que no necesita ningún script ni código adicional para ser usada, así que nos podemos olvidar de JavaScript y cosas así.
Ya sé que quieres ver un ejemplo de todo esto, así que no te preocupes. Te enseño no uno, sino varios ejemplos de cómo se utiliza esta etiqueta:
Ejemplos: Cómo se usa EMBED
Ahora te mostraré un ejemplo práctico de cada uno de los tipos de elementos que se pueden incrustrar con esta etiqueta:
Primer Ejemplo: Incrustar un vídeo
En este primer ejemplo el tipo de incrustación, o sea el tipo de contenido embebido, es un vídeo, y si os fijais aquí aparece el primer atributo de esta etiqueta, que es el type, y señala que, efectivamente, es un vídeo en MP4. Y luego tenemos la ruta, el src típico que tiene HTML para indicar la ruta del contenido.
<embed type="video/mp4" src="video_ejemplo.mp4" width="400" height="300">También se puede personalizar el tamaño de este elemento, y no necesitamos css para hacerlo. En este ejemplo tenemos un WID de 400 píxeles, y le hemos marcado que tenga una altura de 300. Podemos utilizar vídeos de otras páginas web, o también podemos utilizar vídeos que estén en nuestro archivo local.
En el navegador, se mostrará con las medidas que nosotros le hemos indicado.
Segundo ejemplo: Incrustar una imagen
En este caso el tipo de elemento embebido sería una imagen JPEG, y la ruta sería la de una imagen que en este caso es una ruta a nuestro archivo raíz.
<embed type="image/jpeg" src="/owl.jpg" width="100%" height="100%">Fijaros que esta vez le hemos puesto un WID de un 100% y una altura del 100%.
Igualmente, le hemos puesto las medidas que nosotros hemos querido.
Tercer ejemplo: Incrustar un documento PDF
Ahora vamos a ver algo más chulo. Supongamos que ahora lo que queremos embeber es un PDF iPues también se puede!
Simplemente tenemos que indicarle que en este caso es un tipo de aplicación PDF.
<embed type="application/pdf" src="/harry-potter.pdf" width="100%" height="600"></embed>Para hacer una prueba yo he incrustado un PDF, como siempre le he puesto las medidas, y ahora fijaros cómo queda:
Como puedes ver, tenemos el PDF incrustado dentro de nuestra página web. Esto la verdad que puede ser muy útil, incluso podemos descargarlo, podemos imprimirlo. Y tiene más opciones: Por ejemplo, si nosotros queremos subir un documento y permitir su lectura a través de nuestra página web. Bastante chulo ¿No crees?
Cuarto ejemplo: Incrustar un mapa
Como último ejemplo tenemos una función que es muy útil, y es embeber un mapa.
En este caso vamos a embeber un mapa de Google Maps, que creo que es una función que utilizamos muchísimo en nuestras páginas web.
<embed src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3101596.810624324!2d25.2829159!3d67.69238765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x45d30036254ca145%3A0xcedc4eb30d91aca1!2sLaponia%20finlandesa%2C%20Finlandia!5e0!3m2!1ses!2ses!4v1700598086439!5m2!1ses!2ses" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy"></embed>Y fijaros que, como primer atributo, tenemos el src con la ruta del mapa, luego tenemos las medidas, y finalmente, tenemos unos estilos (border: 0).
Y otros atributos adicionales, por ejemplo el loading «lazy» (es para agilizar un poquito el proceso de carga).
Últimos consejos sobre la etiqueta EMBED
La etiqueta EMBED en HTML, como has visto, abre posibilidades que pueden ser muy útiles para negocios locales, o cualquier otra página web.
Antes de irte, has de saber una cosa importante acerca de los elementos embebidos: Tendrás que tener mucho cuidado con lo que incrustas en tu sitio web. Incrusta solo contenido de fuentes viables, y de esta manera te evitarás problemas de seguridad, y vulnerabilidades.
iAh, y otra cosa! No te vayas aún.
Has de saber que el uso de elementos incrustados afecta muchísimo a la velocidad de carga, así que mi recomendación es que no te pases incrustando contenido de esta forma en tu página web.
Recuerda que si tienes cualquier duda, cualquier sugerencia, puedes dejarla en los comentarios, y yo te contestaré encantado de la vida.
Nos vemos en la próxima lección. iAdiós!