En este articulo os voy a explicar que son los iframes en HTML y como usarlos. Con los iframes podemos crear uno o varios espacios dentro de una pagina web para poner dentro de ellos otras paginas web, bien sean internas o externas. Los iframes son algo parecido a los frames, aunque esto últimos se usan muchísimo menos.
Hay que tener en cuenta que los iframes se pueden usar para poner paginas web dentro de ellos, o por lo menos intentarlo, ya que nos vamos a encontrar con que muchas webs no permiten eso, la gran mayoría lo tienen deshabilitado, ya que poniendo una web de otra persona dentro de un iframe en nuestra web podemos llevar a cabo acciones ilegales, aunque no hay que asustarse :D.
La sintaxis de declaración de iframes es muy sencilla y os la muestro:
<iframe src="paginainicial.html" name="mipagina" width="700" height="500" framedorber="1">Tu navegador no soporta iframes</iframe>1 <iframe src="paginainicial.html"name="mipagina"width="700"height="500"framedorber="1">Tu navegador no soporta iframes</iframe>
Vamos por partes, primero esta la etiqueta “iframe” de inicio, luego tenemos el atributo “src” con una pagina web nuestra que hemos creado previamente y que sera la que veamos dentro del iframe, luego tenemos el atributo “name” con la que le ponemos nombre para posteriormente poder usar el iframe para cargar otras paginas web. Luego tenemos los atributos “width” y “height” que indican el tamaño que tendrá con ancho y alto respectivamente. También tiene el atributo “frameborder” con valor “1″ para que veamos el marco del iframe, es algo muy útil cuando diseñamos la pagina web para ver su posición, luego podemos quitarle el marco o borde poniéndole como valor “0″. Luego tenemos un texto “Tu navegador no soporta iframes”, que es un mensaje que aparecerá en el navegador del usuario que visite nuestra pagina en el caso de que su navegador web sea antiguo y no pueda mostrar iframes. Finalmente ponemos la etiqueta de cierre.
Supongamos que queremos que cuando un usuario visite una pagina web que hayamos hecho y haga click en un determinado enlace se cargue otra pagina en un iframe, para ello tenemos que añadirle el atributo “target” al enlace con el nombre del iframe como valor. Para que veáis como funciona os voy a poner un ejemplo, hay que crear tres paginas, la principal donde estará el iframe, otra que sera la que se cargue por defecto en el iframe y otra que se cargara en el iframe cuando hagamos click en el enlace de la pagina principal. La principal es “index.html” y el código HTML es el siguiente:
<html> <head></head> <body> <h1>Pagina principal</h1> <a href="otrapagina.html" target="nombre">Cargar otra pagina</a> <iframe name="nombre" src="pagina.html" width="400" height="400" frameborder="1">Tu navegador no soporta iframes</iframe> </body> </html>1234567891011 <html> <head></head> <body> <h1>Pagina principal</h1> <ahref="otrapagina.html"target="nombre">Cargar otra pagina</a> <iframe name="nombre"src="pagina.html"width="400"height="400"frameborder="1">Tu navegador no soporta iframes</iframe></body> </html>
La siguiente es “pagina.html” que estará en el iframe cargada cuando abramos la principal y su código es el siguiente:
<html> <head></head> <body> <h1>Pagina por defecto en el iframe</h1> </body> </html>123456789 <html> <head></head> <body> <h1>Pagina por defecto en el iframe</h1></body> </html>
La ultima es la que se cargara al hacer click en el enlace de la principal y su código HTML es el siguiente:
<html> <head></head> <body> <h1>Pagina a cargar en el iframe</h1> </body> </html>123456789 <html> <head></head> <body> <h1>Paginaacargar en el iframe</h1></body> </html>
Si copiáis el código en tres archivos como lo he puesto y guardáis los tres documentos en el mismo directorio, al ejecutar el “index.html” veréis el resultado.
Aquí os dejo un vídeo en el cual explico esto paso a paso y podéis ver como funciona:
Si te ha gustado o te ha servido para algo el contenido de este articulo compártelo en las redes sociales para que pueda crecer, muchas gracias.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure