Curso completo de HTML - Frames flotantes
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
Los frames flotantes son muy parecidos a los que hemos visto hasta ahora, siendo su principal diferencia que pueden ser insertados en cualquier lugar de una página web, y su función ya no será dividir la ventana del navegador en varias partes, sino insertar en medio de un documento HTML el contenido de otro en un área del tamaño que indiquemos.
|
Los frames flotantes fueron originalmente una extensión de Internet Explorer que posteriormente pasó a formar parte de el estándar HTML 4.0. Casi todos los navegadores usados actualmente lo soportan con la excepción de Netscape Navigator 4.x. |
Para crear frames flotantes debemos usar la etiqueta IFRAME que significa Inline Frame por su similitud con las imágenes inline que se insertan en cualquier lugar de la página con la etiqueta IMG. La etiqueta IFRAME es un contenedor, esto es, está formada por una instrucción de inicio, <<IFRAME>>, donde se especifican todos las características del frame por medio de atributos, y una instrucción de fin, </</IFRAME>>. Entre estas dos instrucciones se puede incluir código alternativo para aquellos navegadores que no soporten los frames flotantes. Los que si lo hagan ignorarán dicho código. Dicho esto ya podemos escribir el código (de manera general) necesario para insertar un frame flotante:
<IFRAME ...>
...Código alternativo...
</IFRAME>
|
Este código puede ser insertado en cualquier parte del cuerpo de una página. Esto quiere decir que para insertar un frame flotante no es necesaria ser una página especial para poder insertar frames. También es importante destacar que podemos insertar tantos frames flotantes como queramos.
Atributos de los frames flotantes
En el código anterior incluimos tres puntos suspensivos en el interior de la instrucción <FRAME>, estos representan los atributos que debemos usar para indicar el documento HTML donde se encuentra el contenido que queremos insertar en el frame flotante, el tamaño de éste, el alineamiento y otras características variadas.
El atributo SRC es de uso obligatorio y toma como valor la dirección URL, absoluta o relativa, del documento HTML que servirá como contenido. Conocido este atributo ya podemos escribir un primer ejemplo de una página web con un frame flotante:
<HTML>
<HEAD>
<TITLE>Frames flotante</TITLE>
</HEAD>
<BODY>
<H2>A continuación vemos un ejemplo de un
frame flotante:</H2>
<IFRAME SRC="doc.htm">
Tu navegador no soporta frames flotantes, para ver
el contenido ve a <A HREF="doc.htm">doc.htm</A>
</IFRAME>
</BODY>
</HTML>
|
A continuación guardamos este archivo con el nombre iframe.htm, por ejemplo, y creamos el archivo doc.htm con un código HTML sencillo (nosotros hemos incluido un poco de texto, una imagen y un fondo azul) y visualizamos iframe.htm con Explorer obtendremos el resultado de la figura 8.31.
Figura 181. Los frames flotantes nos permiten insertar un documento HTML completo en una página Web.
Unas barras de desplazamiento delatan la presencia de un frame. Un aspecto a destacar de esta figura es que Explorer asigna un tamaño por defecto a dicho frame en el que mostrará todo el contenido del documento HTML que le hayamos indicado independientemente de lo largo que este sea.
Si esta misma página es visualizada por un navegador sin soporte para frames flotantes, por ejemplo Netscape Navigator 4.0, se mostraría el código que hemos introducido entre la instrucción de inicio y la de fin, como vemos en la figura 8.32.
Figura 182. Los navegadores que no soporten frames flotantes mostrarán el código alternativo incluido entre las instrucciones <<IFRAME>> y </</IFRAME>>
Además del atributo SRC la etiqueta IFRAME tiene los siguientes:
- NAME
-
Este atributo nos permitirá asignarle un nombre al frame de manera que podamos referirnos a él por ejemplo para usarle como destino de un enlace usando el atributo TARGET.
- WIDTH y HEIGTH
-
En la figura 8.30 hemos visto que Internet Explorer asignaba un tamaño por defecto al frame flotante. Usando estos dos atributos podremos indicar la anchura y altura respectivamente que no queramos. El valor dado será interpretado como un número en pixeles. Si en el código usado para obtener dicha figura añadimos un tamaño lo suficientemente grande desaparecerá la barra de desplazamiento.
- FRAMEBORDER
-
Este atributo funciona de igual manera que en los frames normales: sirve para quitar y poner los bordes. Escribiendo FRAMBORDER="0" en el ejemplo realizado anteriormente obtenemos el resultado de la figura 8.33, en la que vemos que el borde del frame ha desaparecido. Sin embargo no hemos ampliado el tamaño del frame con los atributos WIDTH y HEIGHT con lo que el documento es más grande que el espacio asignado y la barra de desplazamiento sigue ahí.
- SCROLLING
-
Este atributo nos permitirá quitar o mostrar la barra de desplazamiento. Puede tomar tres valores:
- value
-
Es el valor por defecto e indica que la barra de desplazamiento sólo será mostrada si es necesario (es decir si el documento HTML completo no cabe en el espacio reservado al frame)
- yes
-
significa que las barras de desplazamiento deben mostrarse siempre
- no
-
indica que no se mostrarán nunca.
- HSPACE y MARGINWIDTH
-
Al igual que ocurría con las imágenes se puede especificar un margen alrededor del frame flotante. Con estos atributos concretos indicaremos la distancia mínima en pixeles que debe haber entre el frame y cualquier otro elemento que esté a su derecha o izquierda (margen horizontal). Es decir, sirve para especificar la anchura del margen. La única diferencia entre ambos atributos es que MARGINWIDTH es el nombre aceptado por el estándar y HSPACE está considerado como una extensión de Explorer.
- VSPACE y MARGINHEIGHT
-
Con estos atributos indicaremos la altura en pixeles del margen del frame. Al igual que antes MARGINHEIGHT es el nombre aceptado por el estándar y VSPACE está considerado como una extensión de Explorer.
- ALIGN
-
Permite alinear el frame respecto a la ventana del navegador y respecto al resto de elementos de la página. De nuevo, este atributo funciona exactamente igual que con las imágenes y puede tomar los mismos valores: left, middle, right, top y bottom.
En la figura 8.34 podemos ver un ejemplo con dos frames flotantes uno alineado a la izquierda (ALIGN="left") y el otro a la derecha (ALIGN="right"). En el frame izquierdo hemos incluido un margen de 100 pixeles (MARGINWIDTH=100) y en el derecho hemos quitado la barra de desplazamiento (SCROLLING=no).
- BORDER
-
Este atributo es una extensión de Explorer y tiene la misma función que el atributo del mismo nombre de la etiqueta FRAME, indicar el grosor en pixeles del borde que delimita el frame.
- BORDERCOLOR
-
Con este atributo podremos cambiar el color del borde. Es, al igual que el anterior, una extensión de Explorer no aceptada por el estándar HTML 4.0.
Figura 183. Usando FRAMBORDER=0 podemos eliminar el borde del frame. Sin embargo si el contenido no cabe en frame la barra de desplazamiento sí se mostrará.
Figura 184. Con los atributos ALIGN, MARGINWIDTH y SCROLL podremos controlar las diversas características de los frames flotantes.
Con esto terminamos el aprendizaje del uso de frames en páginas web. En el próximo capítulo del curso nos adentraremos en el mundo de los sonidos, vídeos y otros contenidos multimedia en el World Wide Web.
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - Frames flotantes'
