HTML para principiantes (Parte 17): Iframe o marco

Redes sociales

Puedes utilizar un iframe o marco para mostrar una página web en el interior de una página web.

Iframe HTML

Sintaxis

La sintaxis básica  para añadir iframes o marcos es:

<iframe src="URL"></iframe> 

El atributo src especifica la URL (dirección web) de la página que se va a mostrar en el iframe o marco.

Indicar la altura y anchura

Debes utilizar los atributos height y width para indicar respectivamente la altura y anchura del iframe.

Los valores de estos atributos se especifican, por defecto en pixels, aunque puedes indicarlos también como porcentaje (80% por ejemplo).

Ejemplo

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>
</html>

Resultado en el navegador



Eliminar el borde

Por defecto, cuando se inserta un iframe en un página web, este se muestra rodeado por un borde negro. Para eliminar el borde, tendrás que utilizar el   atributo style junto a la propiedad border de CSS.

Ejemplo

<!DOCTYPE HTML>
<html>
<body>
<iframe src="demo_iframe.htm" style="border:none"></iframe>
</body>
</html>

Resultado en el navegador



Utilizando CSS podrás cambiar el tamaño, estilo y color del borde del iframe.

Ejemplo

<!DOCTYPE HTML>
<html>
<body>
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
</body>
</html>

Resultado en el navegador



Usar un iframe como destino de un link

También puedes utilizar un iframe para que al hacer clic sobre un link o enlace se muestre, en un marco, la página web a la que hace referencia. Para ello, el atributo target del link o enlace debe de coincidir con el atributo name del iframe.

Ejemplo

<!DOCTYPE HTML>
<html>
<body>
<iframe width="100%" height="300px" src="demo_iframe.htm" name="iframe_a"></iframe>
<a href="http://www.un.org/es/index.html" target="iframe_a"><b>Haz clic aquí</b></a> para ver la página de <strong>Naciones Unidas</strong> en el marco superior.
</body>
</html>

Resultado en el navegador


Haz clic aquí para ver la página de Naciones Unidas en el marco superior.


 

 

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.