HTML: lenguaje básico para crear páginas web
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 148
Visitas el mes pasado: 544
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
El trabajo con frames obliga a crear una estructura diferente para la página
de lo que suele ser lo habitual. Sin embargo con la etiqueta iframe
es distinto.
Esta etiqueta inserta una ventana en la que podemos ver el contenido de otra página sin necesidad de utilizar la estructura de página impuesta por los frames. Así dentro de una página normal nos crea una ventana en la que podemos ver otro archivo html, con lo que no necesitamos que todas las partes de la página sean parte de otros archivos.
El comportamiento de la etiqueta iframe
es parecido al de la
etiqueta image
respecto de su posición en la página. Ambas son
etiquetas en línea y admiten el atributo align
para su posicionamiento,
o pueden ser posicionadas de la misma manera mediante el código CSS.
para su correcto funcionamiento la etiqueta iframe
debe tener
su correspondiente etiqueta de cierre, aunque entre estas dos etiquetas no
se escriba nada:
<iframe ....></iframe>
Los atributos de la etiqueta iframe son:
src="ruta_de_la_página"
: atributo obligatorio para indicar la
página que se debe cargar en esta ventana.height ="altura"
: altura en píxeles de la ventana donde se
muestra el iframe.width ="anchura"
: anchura en píxeles de la ventana donde se
muestra el iframe. El valor puede ponerse también en tantos por ciento. Si no se ponen
los atributos de anchura y altura, el documento se mostrará en una pequeña ventana cuyas
medidas pueden variar dependiendo del navegador. También podemos definir la anchura
y la altura mediante el código CSS.scrolling = "yes | no | auto"
: Barras de desplazamiento. El
valor yes
las muestra siempre, el valor no
nunca las muestra,
y el valor auto
las muestra sólo si son necesarias. El valor por
defecto es auto
.name="nombre"
Este atributo da un nombre a la etiqueta, y es imprescindible,
si queremos direccionar los enlaces hacia la ventana del iframe. Para ello se utiliza
el mismo mecanismo que para los frames (atributo target="nombre"
en el enlace, y
atributo name="nombre" en el iframe).La ventana de la etiqueta iframe
se comporta de la misma manera que
si fuera una imagen, en cuanto a posicionamiento. Al igual que éstas, es un elemento
en línea y admite el atributo align
, tambien podemos posicionarla mediante
código CSS.
Los atributos height
y width
marcan la anchura y la altura de
la ventana. debemos ponerlos si queremos que la ventana tenga una anchura y altura determinadas,
aunque también podemos definir esas medidas mediante el código CSS.
Los enlaces en la página principal, actualizan la página principal, pero en la página de la ventana iframe
actualizan sólo la propia ventana del iframe. Si queremos cambiar esto debemos usar el atributo target. Un enlace
dentro del iframe con el atributo target="_parent"
actualizará la ventana
principal.
Veamos cómo insertar un iframe en esta misma página que nos muestre la página principal de la wikipedia. el código que hemos insertado es el siguiente:
<iframe src="https://es.wikipedia.org" width="400" height="300" name="ventana"></iframe>
y lo veremos así en el navegador:
Para ver otra página en la ventana del iframe insertaremos un enlace redireccionadola mediante el atributo target, por ejemplo, insertamos el siguiente enlace (este es un enlace interno al inicio de este manual)
<a href="index.php" target="ventana">Página de inicio del manual</a>
Podemos poner también otro enlace externo para poder volver a ver la página de wikipedia:
<a href="https://es.wikipedia.org" target="ventana">Ver wikipedia</a>
Observa cómo en la etiqueta iframe hemos puesto el atributo name="ventana", y luego hemos redireccionado la página del enlace hacia el iframe mediante el atributo target="ventana".
Tanto si seguimos sólo el manual de HTML como si seguimos los manuales de HTML y CSS al mismo tiempo continuaremos en el siguiente tema donde veremos cómo podemos insertar sonidos, videos, y enlaces para descarga de archivos en nuestra página.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com