Al igual que los frames, los iframes HTML nos permiten mostrar otras urls dentro de nuestra ventana principal, pero con un mayor control y con unas ventajas mayores que te mostraremos a lo largo del artículo.
Los frames requerían de una página vacía para insertar allí los marcos. Esto provocaba una ralentización para el usuario, ya que primero debía cargarse la página principal y luego ya se cargaban los marcos.
Con los iframes no pasa eso ya que la página principal, donde va albergado nuestro iframe, está lleno de contenido, por lo que el usuario recibe información desde el principio.
El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrarte el código de la estructura básica de un iframe HTML para poder explicarte sus partes.
<html>
<head>
<title>Iframes</title>
</head>
<body>
http://www.cesasaweis.com/
</body>
</html>
Como vemos, la estructura es similar a cualquier documento html que hemos visto anteriormente, con su cabecera (<head>), su título (<title>) y su contenido visual dentro de <body>.
Como vemos en el código anterior, debemos definir el tamaño del marco del iframe y definir si queremos que haya barra desplazadora o no. Ésta opción la especificamos gracias al atributo “scrolling”. Su valor por defecto es “auto”, aunque podemos definir si queremos barras desplazadoras (“yes”) o si no las queremos (“no”).
El iframe debe tener una fuente, que será la url que muestre en el marco que hemos creado. En nuestro caso hemos puesto la página de inicio de un blog de cocina.
Por otro lado, si quieres insertar un vídeo estás de suerte: youtube genera un código iframe gratuito para que puedas insertar vídeos en tu página web de una forma muy sencilla. Cuando hayas localizado el vídeo que quieras insertar, pincha en la opción "Compartir" > "insertar" y copia el código iframe del embed vídeo. Pégalo en el código de tu web y listo.
Tutorial de HTML (XVII) - Marquee (texto en movimiento)
[…] Tutorial de HTML (XVI) […]
ResponderEliminar[…] Tutorial de HTML (XVI) – iFrames […]
ResponderEliminar