Cargando

Ir a contenido

X


Ver Más! Unir varios PDF en uno en Windows 10 nunca fue tan fácil! Sigue los pasos con PDFelement y estará listo en un abrir y cerrar de ojos.


 


HTML5, Elementos Embebidos - Parte 2

En este tutorial conoceremos cómo trabajar con elementos embebidos como HTML, Vídeos, etc.


Escrito por el oct 13 2014 10:36


Muchas veces en nuestros documentos HTML debemos enriquecer el contenido y ya no es cuestión de agregar una imagen sino que también de hacerlo a nivel de media en general, para ello debemos incluir contenidos de otras páginas, incluir vídeos, etc. Para ello veremos cómo embeber otro tipo de elementos diferentes a las imágenes.

HTML embebido


Para incluir contenido HTML utilizaremos el elemento iframe, este elemento nos permite incluir una página diferente a la actual dentro nuestro documento, los atributos que tiene son los siguientes:
  • src
  • srcdoc
  • name
  • width
  • height
  • sandbox
  • seamless
Veamos un ejemplo a nivel de código de cómo implementar un iframe en un documento HTML5:
<!DOCTYPE HTML>
<html>

<head>
<title>Example</title>
</head>

<body>

<header>
<h1>Things I like</h1>
<nav>
<ul>
<li>
<a href="fruits.html" target="frame">Fruits I Like</a>
</li>
<li>
<a href="activities.html" target="frame">Activities I Like</a>
</li>
</ul>
</nav>
</header>

<iframe name="myframe" width="300" height="100">
</iframe>

</body>

</html>

En este ejemplo vemos como utilizamos unos elemento a para generar links con los cuales podemos cargar un documento diferente dentro del iframe, dentro del mismo vemos atributos como name el cual indica el nombre del elemento, al igual que width y height que nos permiten establecer el tamaño del elemento.
Veamos cómo nos queda este ejemplo cuando lo ejecutamos en nuestro navegador:


HTML5-Atributos.jpg


En HTML5 tenemos dos nuevos atributos, veamos el primero, seamless, este atributo nos permite mostrar el iframe como si fuese parte integral de nuestro documento, es decir un usuario no se daría cuenta que está viendo contenido que no pertenece al site, el segundo atributo, sandbox, nos sirve para evitar que funcionen los siguientes atributos dentro del documento que se abre en el iframe:
  • scripts
  • forms
  • plugins
  • links que se dirijan a otros documentos
Los valores que se puede tomar el atributo sandbox son los siguientes:
  • allow-forms: Habilita el uso de formularios.
  • allow-scripts: Habilita el uso de scripts, como por ejemplo javascript.
  • allow-top-navigation: Habilita los links para que puedan sustituir el documento actual desde el cual se llama al iframe o también abrir nuevas pestañas y ventanas.
  • allow-same-origin: Permite que el contenido del iframe sea tratado como si se hubiese generado dentro del mismo documento que hace el llamado.

El elemento embed


Este elemento nos permite incorporar objetos dentro de nuestro documento HTML, como por ejemplo un vídeo de youtube, veamos un ejemplo de esto:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<embed src="http://www.youtube.com/watch?v=8IydisW8iwU" type="application/x-shockwave-flash" width="560" height="349" allowfullscreen="true"/>
</body>
</html>

Como podemos ver en el ejemplo tenemos el atributo src que indica la fuente del objeto a embeber, luego el type que nos indica que tipo objeto es, así como el width y el height para establecer el tamaño de nuestro elemento.
Este elemento es bastante útil al momento de seguir enriqueciendo nuestras páginas, ahora no solo con otros documentos e imágenes, sino también con vídeos y contenido flash.

Con esto terminamos este tutorial, ya debemos estar en capacidad de producir documentos HTML enriquecidos, que se ajusten a la imagen que podamos tener en nuestra mentes de cómo debe verse nuestra página, ya sea para mostrar imágenes o vídeos desde diferentes tipos de fuentes.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado oct 13 2014 10:36
  •   Actualizado oct 13 2014 10:40
  •   Visitas 1.2K
  •   Nivel
    Profesional