HTML    •    CSS

Introducción al HTML.
Estructura básica de una página web.
Meta tags básicos.
Etiqueta body.
Formateo de texto.
Párrafos y saltos de línea.
Comentarios.
Separadores. Etiqueta hr.
Encabezados.
Caracteres especiales.
Tablas.
Listas.
Imágenes.
Mapas de imágenes.
Enlaces.
Formularios I: introducción.
Formularios II: campos de texto.
Formularios III: listas de opciones.
Formularios IV: botones submit y reset.
Formularios V: otros campos.
Formularios VI: ejemplo de formulario.
Frames.
Iframes.
Marquee.
HTML 5
Fieldset y legend.
Más etiquetas.
Idioma
CSS.
Javascript.
Inicio > Curso de HTML > Iframes.

Iframes.
En otro artículo de la Web te presentamos lo que eran los frames y vimos su estructura y sus utilidades. Ahora te vamos a presentar los iframes. Éstos también 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 para poder explicarte sus partes.

<html>
<head>
<title>Iframes</title>
</head>
<body>
<iframe src="http://html.hazunaweb.com/"
width="600" height="400" scrolling="auto">
Texto alternativo para navegadores que no aceptan iframes
</iframe>
</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 este tutorial html.

Hemos querido presentarte un ejemplo de iframe. Podrás verlo si pinchas en el siguiente enlace: Ver ejemplo de iframe. Para ver su código selecciona en el navegador la opción de ver el código fuente de la página.

<< Frames. Marquee. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.