IFRAME


☛ La etiqueta IFRAME es un recuadro dentro de una página web, en la cual podemos insertar una pagina web dentro de otra, de la misma forma que insertamos un gráfico o una tabla. El iFrame es un objeto que se manipula con la misma libertad que cualquier otro elemento dentro del espacio HTML.

<iframe src="URL"></iframe>

Ejemplo
<div align="center"><iframe src="http://cambio-cambie.blogspot.com.ar/2014/01/que-es-el-html.html" width=450 height=300 frameborder=1 scrolling=auto></iframe></div>


Si queremos poner una parte determinada de un sitio, tenemos que aplicarle un poco de estilo y de HTML añadido. El código para ubicar el iframe donde queramos, es el siguiente:




<style type="text/css">
#outerdiv{
width:500px;
height:400px;
overflow:hidden;
position:relative;
}
#inneriframe{
position:absolute;
top:-280px;
left:-100px;
width:1000px;
height:1000px;}
</style>
<div id='outerdiv'>
<iframe src=" URL" id='inneriframe' scrolling=no></iframe>
</div>




Además de que la dirección que se pone, tiene todos estos atributos:

  • src="URL a mostrar": El atributo principal y el lugar donde se teclea la dirección del elemento HTML a mostrar dentro del marco.
  • scrolling=yes/auto/no: se muestran o se ocultan las barras de desplazamiento.
  • frameborder=0/1: El valor "1" indica al navegador que dibuje un borde para este frame, mientras que el valor "0" que no lo haga. 
  • marginwidth=valorenpixels: distancia entre márgenes laterales y el contenido.
  • marginheight=valorenpixels: distancia entre márgenes inferior-superior y el contenido.
  • top=valorenpixels: distancia de arriba.
  • left=valorenpixels: distancia de la izquierda.
  • width=valorenpixels: ancho al iframe.
  • height=valorenpixels: altura al elemento.
  • class="nombredelaclase": dar determinado aspecto al contenido del iframe.
  • style="...": define un estilo visual para el elemento usando instrucciones CSS. Cada instrucción va separada de la siguiente por un punto y coma (;). Es mejor práctica definir clases en la hoja de estilos y usar la anterior instrucción. 
  • title="titulo": asigna un título al elemento, que será mostrado al pasar el puntero por encima.














Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top