Iframe y Frame: qué son y cuál es la mejor manera de utilizar los marcos en HTML
Entonces, las monturas… ¿para qué sirven y qué beneficios aportan? Intentaré hablar sobre esto en este capítulo y, por supuesto, sobre cómo implementarlos y trabajar con ellos.
A menudo, al crear un sitio web, es necesario abrir varios documentos HTML al mismo tiempo en una ventana del navegador... por eso se crearon marcos para definir las áreas de trabajo de cada documento. Además, los marcos son una buena herramienta con la que se puede diseñar la página; sirven como una valiosa "alternativa" al método tabular de diseño de la página... Pongo la palabra "alternativa" entre comillas porque es una forma completamente diferente. de construir un sitio web con sus propias ventajas y desventajas y es bastante difícil compararlo con la construcción del sitio hasta ahora familiar... pero lo primero es lo primero...
¿Empecemos? Digamos que necesitamos abrir tres documentos HTML a la vez en una ventana del navegador y organizarlos, por ejemplo, de esta manera:
¿Qué necesitamos para esto? Para empezar, por supuesto, necesitamos crear tres documentos html separados que abriremos en una ventana. Dejemos que el primer documento contenga una imagen gráfica y actúe como un logotipo, llamémoslo logotype.html, el segundo documento será. algo de contenido... llamémoslo menú .html, y el tercero es un documento con mucho texto. texto.html. Por supuesto, puedes inventar tus propios nombres, así como el contenido de los documentos, pero por ahora es mejor copiar el mío... será más conveniente tanto para mí como para ti.
Entonces, hay tres archivos logotype.html, menu.html y text.html... que necesitamos colocar bajo un mismo techo, pero aún no tenemos un techo...
Escribimos “techo”, el documento principal al que conectaremos nuestros archivos. Como será el principal, le damos el nombre index.html.
marcos
Aquí está la estructura del documento que nos resulta familiar y que analizamos al principio de nuestra formación. ¡Los marcos rompen los estereotipos existentes! La estructura del marco del documento se ve así:
marcos
Sin etiqueta
compensa la nueva etiqueta - instalar un marco o un conjunto de marcos... con este tipo trabajaremos más.
Etiqueta tiene atributos filas Y columnas- estos atributos le dicen al navegador cómo colocar marcos en la ventana del navegador
filas- horizontalmente
columnas- verticalmente
En nuestro caso, necesitamos la colocación horizontal de los marcos... así que escribimos así:
marcos
Los porcentajes después del signo igual no son más que los tamaños de nuestras ventanas de marco en una ventana grande del navegador, se supone que debemos colocar tres ventanas; por lo tanto, también hay tres valores separados por comas; Recuerde cómo configuramos los tamaños de celda para la tabla, aquí se aplica el mismo principio. Como en el caso de las celdas de la tabla, los tamaños de los marcos se pueden especificar como un porcentaje del área total y en píxeles.
A continuación se muestran algunos ejemplos de escritura:
- esta entrada indica que habrá tres ventanas horizontales donde la última ocupará el 70% del área de la ventana del navegador y las dos primeras ocuparán el 15%.
- Aquí hay tres ventanas ubicadas verticalmente, cuyo ancho se indica en píxeles.
- Tal entrada significa que la primera y tercera ventana tendrán un ancho de 100 y 180 píxeles respectivamente, y el segundo cuadro ocupará toda el área restante.
Ya terminamos de colocar los documentos, ahora solo queda conectarlos y disfrutar del primer resultado.
Etiqueta
y su atributo src indicará al navegador la ruta al documento html que debe abrirse en el espacio habilitado para ello. Tenemos tres documentos separados logotype.html, menu.html y text.html, ahora necesitamos especificar una ruta para cada uno, que es lo que realmente hacemos. (Supongo que los cuatro archivos están en la misma carpeta y las rutas a ellos tienen la notación más simple como:
)
archivo index.html
marcos
Archivo logotipo.html
marcos
Menú de archivo.html
marcos
Menú:
sopa de champiñones
Frijoles en una olla, al estilo italiano
Ensalada de verano australiana
... ... ...
Archivo texto.html
marcos
sopa de champiñones mucho texto..
En este ejemplo, publiqué los cuatro documentos HTML, donde index.html es el principal y los otros tres son páginas complementarias, cada una de las cuales, en principio, puede funcionar de forma autónoma y contener cualquier cosa, imágenes, tablas, textos, enlaces. .. Lo hice. Esto es para que comprendas el principio de trabajar con marcos. En más ejemplos, publicaré solo el archivo principal con marcos (de lo contrario, todos ocuparán demasiado espacio en la página), y ustedes saben que tengo "en algún lugar" todos los demás archivos que contienen gráficos, textos, tal vez algo así. de lo contrario... bueno, no te quedes atrás, edita lentamente tus propias páginas para el futuro sitio de capacitación... No sé sobre qué vas a escribir el tuyo, pero prometí ayudar a una chica a escribir un sitio web dedicado a cocinar..)) así que decidí, por así decirlo, apuntar a dos pájaros de un tiro.. a la conejita y al sitio web..)) algo como esto..))
En el ejemplo anterior, colocamos todas las ventanas horizontalmente, cambiando el atributo filas en columnas puedes organizarlos verticalmente. Pero ¿y si necesitas colocar nuestras ventanas?
¿Así?: ¿O así?: ¿O incluso así?:
Hay una salida. Veamos ejemplos.
Empecemos por el primer caso… ¿qué vemos? Y vemos dos líneas, donde la segunda se divide en dos columnas.
Y ahora, en orden:
- divide la ventana del navegador en dos líneas
- carga nuestro logo en la primera línea- y divide la segunda fila en dos columnas
- en el primero habrá un menú
- y en el segundo hay mucho texto
- cerrar la etiqueta de división de columnas
- cerrar la etiqueta de división de líneaEn general es incorrecto decir columnas y filas, ya que los marcos no tienen nada que ver con las tablas más que la similitud visual es correcto decir marcos horizontales y verticales.. bueno, lo digo así para que quede; mas claro para ti..
Bien, veamos un ejemplo:
marcos
En el segundo caso, tenemos dos columnas en las que la segunda se divide en dos líneas, así que escribiremos así:
- divide la ventana en dos columnas
- el primero contendrá el contenido - y divide el segundo en dos líneas
- logotipo
- y texto principal
- cerrar la división de línea
- cerrar la división en columnas
marcos
El tercer caso es un poco más complicado, pero no debes tener miedo... sobre todo porque yo personalmente elegí este tipo de construcción para un sitio sobre arte culinario, te explico a continuación; ¿Que tenemos? tres columnas, y la segunda columna contiene esencialmente nuestro primer caso.
- divide la ventana en tres columnas (tenga en cuenta que la segunda columna ocupa exactamente 800 píxeles y las dos exteriores no tienen un tamaño exacto y dividirán el espacio restante por la mitad)
-en la primera columna cargamos un documento html que realizará una función puramente decorativa -
-
- En la segunda columna insertamos nuestro "primer caso"
-
-
-
-
- en la tercera columna cargamos el mismo archivo con decoraciones
- portazo
Mire el ejemplo y luego explicaré por qué elegí la ruta de cinco ventanas.
marcos
Entonces, ¿por qué cinco ventanas? Recuerdo que ya escribí sobre el hecho de que diferentes usuarios de Internet tienen diferentes resoluciones en sus monitores y, en consecuencia, en diferentes pantallas nuestro sitio se verá diferente... y si no hay tamaños específicos, todos nuestros dibujos, textos, tablas se verán diferentes. , como dicen, “flotante” para aquellos usuarios cuyas resoluciones de monitor son diferentes a la tuya. Cuando diseñamos el sitio usando una tabla, el problema con las dimensiones de la página se resolvió asignando un ancho y alto específicos a esta tabla. Desafortunadamente, esto no se puede hacer con marcos... incluso si especifica el ancho de los marcos que no están en; En porcentajes, pero en píxeles, la última columna se extenderá por el ancho restante de la ventana del navegador y la página, como dicen, perderá su "apariencia comercial". ¿Entonces, qué debemos hacer? Tenemos que recurrir a pequeños trucos... Al configurar la columna central (en la que en realidad tenemos toda la página) con un tamaño de 800 píxeles, determinamos de una vez por todas su ancho, y la primera y tercera columnas adimensionales, en Además de la decoración, actúan como una especie de “resortes” sobre los que se apoya la columna central. Entonces, para personas con una resolución de monitor pequeña, estas ventanas/campos serán estrechos, y para personas con una resolución alta, serán anchos. por lo que la columna central no se verá afectada de ninguna manera y ahora podremos colocar cualquier objeto en ella con total confianza, con referencia local precisa, sin preocuparnos por su destino futuro. Compare el primer ejemplo, donde hay tres ventanas, y el tercero, donde ya hay cinco, ¿no es mejor?
Terminaremos con la colocación y tamaños de marcos... y ya llevamos mucho tiempo estancados aquí... sigamos adelante.
Le damos a los marcos una apariencia ordenada.
En nuestro último ejemplo, lo primero que llama la atención es un montón de barras de desplazamiento, que están ahí donde se necesitan y donde no se necesitan. Vamos a deshacernos de ellas, bueno, puedes dejarlas en algún lugar. Esto se hace usando el atributo desplazamiento- etiqueta
, puede tener uno de tres valores:
- No
- Sí- siempre muestra
- auto
marcos
Los campos de marco, o la distancia desde los límites del marco hasta el texto o la imagen, como en nuestro caso, se especifican en píxeles mediante atributos. ancho de margen Y altura del margen etiqueta
marcos
Hablemos un poco sobre el marco alrededor de nuestros marcos.
Si notó, en el último ejemplo, al pasar el cursor sobre el borde del marco, el cursor adquiere una apariencia diferente (agarrar y mover) y ahora este borde se puede arrastrar en cualquier dirección mientras se mantiene presionado el botón izquierdo. Botón del ratón. A veces, esta "movilidad" de los límites del marco favorece al webmaster, pero lo más frecuente es que se interponga en su camino. Para evitar que el usuario juegue con los tamaños de ventana de la etiqueta
se le ocurrió un atributo noresize
marcos
Pero este es un atributo que nos resulta familiar desde hace mucho tiempo. borde establece el ancho en píxeles de estos mismos fotogramas entre los fotogramas... está escrito dentro de la etiqueta . Lo mismo que antes significado borde="0" nos liberará completamente de los frameworks.
marcos
Marcos y enlaces.
Es hora de revivir nuestro sitio con enlaces, pero aquí está el problema, el conocido enlace común y corriente. Frijoles en una olla, al estilo italiano Abrirá este documento en el mismo marco donde se encuentra, en nuestro caso directamente en el marco con el contenido, y el contenido en sí al momento de hacer clic en este enlace irá al olvido. Puedes mirar el ejemplo torpe. , haga clic en cualquier enlace que contenga.. Para evitar que esto suceda en el futuro, es necesario indicar al navegador en qué marco debe abrirse el documento que necesitamos, a menos, por supuesto, que realmente necesite abrirlo en el. mismo cuadro.
Recuerdo que ya nos familiarizamos, en el capítulo dedicado a los enlaces, con los atributos. nombre- nombre y objetivo- objetivo, también se utilizan cuando se trabaja con marcos, el mecanismo ha cambiado ligeramente y es casi el mismo. En primer lugar, hay que asignar un nombre individual al marco en el que queremos abrir los documentos.
está escrito así:
nombre="osnovnoe"> se te ocurre cualquier nombre... lo principal es no olvidarlo...
Está escrito así:
objetivo="osnovnoe">Frijoles en olla, estilo italiano
Bueno, creo que no hace falta explicarte que antes de consultar cualquier documento, debes crearlo... en mi caso, los archivos (recetas) tienen los nombres text.html, text1.html, text2.html. ...
Mira el ejemplo:
Archivo index.html
marcos
Menú de archivo.html
marcos
Menú:
objetivo="osnovnoe">Sopa de champiñones
objetivo="osnovnoe">Frijoles en olla, estilo italiano
objetivo="osnovnoe">Ensalada de verano australiana
... ... ...
Al igual que antes, el documento se puede abrir en una ventana separada. Déjame recordarte que está escrito así:
objetivo="_en blanco">Frijoles en olla, estilo italiano
O asignando el atributo objetivo significado _arribaábrelo en la misma ventana del navegador, pero en pantalla completa... “poniendo a cero” todo lo que hay allí... escrito así:
objetivo="_top">Frijoles en olla, estilo italiano
Así quedó el sitio... por supuesto, aún queda trabajo por hacer... además, según mi idea, tendrá una estructura ligeramente diferente en términos de navegación por el sitio, tendrá un montón de páginas, un menú bonito, pero en cuanto a la estructura del marco, creo que seguirá siendo la misma.
marco flotante
A veces es necesario insertar otro documento HTML o incluso una serie de dichos documentos en una página que contiene una estructura sin marco en una ventana separada. Para lograr este propósito existe una etiqueta.
Documento de ejemplo con marco flotante:
marco flotante
marco flotante
En esta página se ha introducido el llamado "marco flotante".
En una ventana separada, abre otro documento html para su visualización.
… … …
Sin marcos
Algunos navegadores no admiten la estructura del marco del documento o la interpretan incorrectamente. Además, los usuarios a menudo desactivan deliberadamente la compatibilidad con la estructura del marco del documento HTML en la configuración de su navegador. Y aunque el porcentaje de estos navegadores y usuarios es pequeño, existen.
Ahora imagine que ha creado su sitio web utilizando una estructura de marco y algunos visitantes, tal vez sin saber cuál es el problema, intentan abrir su sitio web y su navegador muestra un error. ¿Qué pensarán de su sitio? Pienso algo como: "Uf... algún tipo de tontería... ¡No volveré aquí otra vez!".
Para dejar claro al usuario que su navegador/la configuración del navegador no admite marcos, existe una etiqueta <![CDATA[
</b> .</p>
<p>Etiqueta <b><noframes>
</b> muestra el texto encerrado en él si el navegador del usuario no admite marcos o si están deshabilitados por la fuerza en su configuración. Si el navegador del usuario admite marcos, esta etiqueta simplemente se ignora.</p>
<p> <html> <br>
<head> <br>
<title>marcos</title> <br>
</head> <br>
<frameset cols="*,800,*" border="0"> <br><b><noframes>Lo sentimos, pero su navegador no soporta marcos.]]>
El resultado del ejemplo se notará si su navegador realmente no admite marcos (lo pensé durante mucho tiempo... :) si es así, ¿por qué leer este capítulo?) o si desactivó la compatibilidad con marcos en su navegador como experimento.
Etiqueta <![CDATA[
</b> debe estar ubicado dentro de una etiqueta <b><frameset>
</b></p>
<p>Con un marco flotante todo es aún más sencillo, basta con escribir el texto deseado entre <b><iframe> </iframe>
</b> y este mensaje se mostrará en la pantalla si el navegador no admite marcos.</p>
<p>
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Lo sentimos, pero su navegador no soporta marcos.</b></iframe>
</p>
<ul><p>Antes de comenzar a crear una página usando una estructura de marco, analice su diseño, el tamaño de cada ventana, la presencia o ausencia de barras de desplazamiento en ellas, etc. Después de esto, puede crear archivos HTML complementarios sin preocuparse particularmente por su relativa posición entre sí.</p><p>Usar etiqueta <b><noframes>
</b>. Recuerde que si en su navegador el sitio funciona y se muestra como esperaba, ¡para otros usuarios las cosas pueden ser diferentes!</p>
</ul>
<p>Define la estructura de los marcos de una página web. Los marcos dividen la ventana del navegador en áreas separadas ubicadas una cerca de la otra. Cada una de estas áreas carga una página web separada, definida usando el elemento <frame>. Los marcos se utilizan para dividir una página web en dos o más documentos, que normalmente contienen la navegación y el contenido del sitio. El mecanismo de marco le permite abrir un documento en un marco desde un enlace en el que se hace clic en un marco completamente diferente. Elemento <frameset>(De inglés <i>conjunto de marcos</i>- conjunto de marcos) reemplaza <body>en la página web. Está permitido utilizar una estructura anidada de elementos; esto le permite dividir un cuadro en dos o más áreas.</p><p>Al utilizar marcos, considere las siguientes características:</p><ul><li>Los motores de búsqueda no funcionan bien con estructuras de marcos porque las páginas que contienen contenido generalmente no tienen enlaces a otros documentos.</li><li>Los marcos ocultan la dirección de la página en la que se encuentra el visitante y se configuran a través del elemento. <title>y siempre muestra solo la dirección del sitio. Por este motivo, la página que le gusta no se puede colocar en la sección "Favoritos" del navegador.</li><li>A menudo, el usuario llega a un sitio web sin tener la menor idea de dónde ha llegado, porque simplemente ha hecho clic en un enlace recibido en un motor de búsqueda. Para que al visitante del sitio le resulte más fácil descubrir dónde se encuentra, el nombre del sitio, el título de la página y la navegación se colocan en cada página. Los marcos tienden a violar este principio al separar el título del sitio del contenido y la navegación del contenido. Imagine que encuentra un enlace adecuado en un motor de búsqueda, hace clic en él y al final se abre un documento sin título ni navegación. Para comprender dónde estamos o ver otros materiales, deberá editar la ruta en la barra de direcciones, lo que en cualquier caso resulta un inconveniente.</li><li>Una gran cantidad de fotogramas requiere que el navegador asigne más memoria de lo habitual.</li>
</ul><p>Este artículo está obsoleto, no lo utilices.</p><h2>Sintaxis</h2><p><frameset>
<frame>
</frameset></p><h2>etiqueta de cierre</h2><p>Requerido.</p><h2>Ejemplo</h2><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MARCO</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="page/top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="page/left.html" name="leftFrame" scrolling="no" noresize>
<frame src="page/main.html" name="mainFrame">
</frameset>
</frameset>
</html>
</p><p>A continuación se dan algunos ejemplos de organización de marcos.</p><table><tr><td style="width: 49%; padding-right: 5px"><table style="width:100%" class="data"><tr><td style="background:#f0f0f0">Cuadro 1</td><td style="background:#FFCC99">Cuadro 2</td>
</tr><tr><td style="background:#f0f0f0">Cuadro 3</td><td style="background:#FFCC99">Cuadro 4</td>
</tr><tr><td style="background:#f0f0f0">Cuadro 5</td><td style="background:#FFCC99">Cuadro 6</td>
</tr></table></td><td style="width: 49%; padding-left: 5px; vertical-align: top"><table style="width:100%" class="data"><tr><td rowspan="2" style="width:28%; background:#f0f0f0">Cuadro 1</td><td style="width:72%; background:#FFCC99">Cuadro 2</td>
</tr><tr><td>Cuadro 3</td>
</tr></table></td>
</tr><tr><td> <frameset rows="33%,33%,*" cols="50%, 50%">
<frame src="r1c1.html" name="Фрейм 1">
<frame src="r1c2.html" name="Фрейм 2">
<frame src="r2c1.html" name="Фрейм 3">
<frame src="r2c2.html" name="Фрейм 4">
<frame src="r3c1.html" name="Фрейм 5">
<frame src="r3c2.html" name="Фрейм 6">
</frameset>
</td><td style="vertical-align: top"> <frameset rows="*" cols="80,*">
<frame src="frame1.html" name="Фрейм 1">
<frameset rows="80,*">
<frame src="frame2.html" name="Фрейм 2">
<frame src="frame3.html" name="Фрейм 3">
</frameset>
</frameset>
</td>
</tr></table><h2>Especificación</h2><p>Cada especificación pasa por varias etapas de aprobación.</p><ul><li>Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.</li><li>Recomendación del candidato ( <span>Posible recomendación</span>) - el grupo responsable del estándar está satisfecho de que cumple con sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.</li><li>Recomendación propuesta <span>Recomendación sugerida</span>) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.</li><li>Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.</li><li>Borrador del editor ( <span>Borrador editorial</span>) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.</li><li>Borrador ( <span>Borrador de especificación</span>) - el primer borrador de la norma.</li>
</ul><p>Destaca el estándar HTML vivo (Living): no se adhiere a la numeración de versiones tradicional, ya que está en constante desarrollo y se actualiza periódicamente.</p>
<p>Etiqueta <b>conjunto de cuadros</b> Define la estructura de los marcos de una página web. Los marcos dividen la ventana del navegador en áreas separadas ubicadas una cerca de la otra. Cada una de estas áreas se carga con una página web independiente, definida mediante la etiqueta FRAME. Los marcos se utilizan para dividir una página web en dos o más documentos, que normalmente contienen la navegación y el contenido del sitio. El mecanismo de marco le permite abrir un documento en un marco desde un enlace en el que se hace clic en un marco completamente diferente. La etiqueta FRAMESET reemplaza el elemento BODY en una página web. <br>Está permitido utilizar una estructura anidada de elementos; esto le permite dividir un cuadro en dos o más áreas.</p>
<p>Al utilizar marcos, considere las siguientes características:</p>
<ul><li>Los motores de búsqueda no funcionan bien con estructuras de marcos porque las páginas que contienen contenido generalmente no tienen enlaces a otros documentos.</li>
<li>Los marcos ocultan la dirección de la página en la que se encuentra el visitante y se configuran mediante la etiqueta TITLE, y siempre muestran solo la dirección del sitio. Por este motivo, la página que le gusta no se puede colocar en la sección "Favoritos" del navegador.</li>
<li>A menudo, el usuario llega a un sitio web sin tener la menor idea de dónde ha llegado, porque simplemente ha hecho clic en un enlace recibido en un motor de búsqueda. Para que al visitante del sitio le resulte más fácil descubrir dónde se encuentra, el nombre del sitio, el título de la página y la navegación se colocan en cada página. Los marcos tienden a violar este principio al separar el título del sitio del contenido y la navegación del contenido. Imagine que encuentra un enlace adecuado en un motor de búsqueda, hace clic en él y al final se abre un documento sin título ni navegación. Para comprender dónde estamos o ver otros materiales, deberá editar la ruta en la barra de direcciones, lo que en cualquier caso resulta un inconveniente.</li>
<li>Una gran cantidad de fotogramas requiere que el navegador asigne más memoria de lo habitual.</li>
</ul><p><b>Sintaxis</b><br><frameset><br> <frame><br></frameset></p>
<p><b>etiqueta de cierre</b><br>Requerido.</p>
<p><b>Opciones</b><br>borde: espesor del borde entre cuadros. <br>bordercolor: color de la línea del borde. <br>cols: establece el ancho o las proporciones de los marcos de las columnas. <br>frameborder: muestra o no un borde alrededor del marco. <br>framespaceing: análogo al parámetro de borde, establece el ancho del borde. <br>filas: establece el tamaño o las proporciones de los cuadros como filas.</p>
<p>Ejemplo 1: uso de la etiqueta FRAMESET</p>
<blockquote>
<p><html><br><frameset rows="80,*" cols="*" frameborder=NO border=0 framespacing=0><br> <frame src=top.html name=topFrame scrolling=no noresize><br> <frameset cols="80,*" frameborder=no border=0 framespacing=0><br> <frame src=left.html name=leftFrame scrolling=no noresize><br> <frame src=main.html name=mainFrame><br> </frameset><br></frameset><br></html></p>
</blockquote>
<p>A continuación se dan algunos ejemplos de organización de marcos.</p>
<table style="border-collapse: collapse; width: 75%;" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><td width="50%">
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td bgcolor="#f0f0f0">Cuadro 1</td>
<td bgcolor="#ffcc99">Cuadro 2</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Cuadro 3</td>
<td bgcolor="#ffcc99">Cuadro 4</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Cuadro 5</td>
<td bgcolor="#ffcc99">Cuadro 6</td>
</tr></tbody></table></td>
<td>
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td rowspan="2" width="28%" bgcolor="#f0f0f0">Cuadro 1</td>
<td width="72%" bgcolor="#ffcc99">Cuadro 2</td>
</tr><tr><td height="55" align="middle">Cuadro 3</td>
</tr></tbody></table></td>
</tr><tr valign="top"><td><frameset rows="33%,33%,*" cols="50%, 50%"><br><frame src=r1c1.html name="Фрейм 1"><br><frame src=r1c2.html name="Фрейм 2"><br><frame src=r2c1.html name="Фрейм 3"><br><frame src=r2c2.html name="Фрейм 4"><br><frame src=r3c1.html name="Фрейм 5"><br><frame src=r3c2.html name="Фрейм 6"><br></frameset><br></td>
<td><frameset rows="*" cols="80,*"><br><frame src=frame1.html name="Фрейм 1"><br><frameset rows="80,*"><br><frame src=frame2.html name="Фрейм 2"><br><frame src=frame3.html name="Фрейм 3"><br></frameset><br></frameset>
</td>
</tr></tbody></table><h3>Descripción de los parámetros de la etiqueta FRAMESET</h3>
<h4>Parámetro FRONTERA</h4>
<p><b>Descripción</b><br>Establece el grosor del borde entre fotogramas. De forma predeterminada, la línea se muestra en tres dimensiones; utilizando los parámetros de color y borde del borde, puede personalizar su apariencia a su discreción. Los navegadores interpretan los parámetros de la etiqueta FRAMESET y muestran la línea de manera diferente. Por ejemplo, para una línea negra con un espesor de 5 píxeles.</p>
<p>Como puede ver en la figura, Opera no cambia el color de la línea en absoluto, pero muestra correctamente el valor requerido. El navegador Internet Explorer toma la parte central de la línea rellena de negro como grosor, mientras que Netscape toma todo el ancho o alto, incluidas pequeñas líneas a los lados, creando un efecto elevado.</p>
<p>Si la etiqueta FRAMESET tiene framespace=0, entonces el navegador Opera no muestra el borde en absoluto e Internet Exporter ignora los valores del color del borde y los atributos del borde.</p>
<p><b>Sintaxis</b><br><frameset border=значение>...</frameset></p>
<p><b>Argumentos</b><br>Un número entero positivo. Un valor de 0 oculta el marco.</p>
<p><b>Valor por defecto</b><br>Depende del navegador y del sistema operativo.</p>
<p><b>Similar a CSS</b><br>borde</p>
<p>Ejemplo 2: cambiar el grosor del borde</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5
><br><frame src=left.html name=leftFrame><br><frameset rows="80,*"><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Parámetro COLOR DEL BORDE</h4>
<p><b>Descripción</b><br>Define el color de los bordes visibles entre fotogramas. El color de un elemento FRAMESET principal se puede cambiar utilizando una etiqueta FRAMESET secundaria o un elemento FRAME individual. El navegador Opera generalmente ignora este parámetro.</p>
<p><b>Sintaxis</b><br><frameset bordercolor=цвет>...</frameset></p>
<p><b>Argumentos</b><br>El valor del color se puede configurar de dos maneras.</p>
<p>1. Por su nombre <br>Los navegadores admiten algunos colores por su nombre.</p>
<p>2. Por valor hexadecimal <br>Los números hexadecimales se utilizan para especificar colores. El sistema hexadecimal, a diferencia del sistema decimal, se basa, como su nombre indica, en el número 16. Los números serán los siguientes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Los números del 10 al 15 se sustituyen por letras latinas. Los números mayores a 15 en el sistema hexadecimal se forman combinando dos números en uno. Por ejemplo, el número 255 en decimal corresponde al número FF en hexadecimal. Para evitar confusiones al determinar el sistema numérico, se coloca un símbolo de almohadilla # antes del número hexadecimal, por ejemplo #666999. Cada uno de los tres colores (rojo, verde y azul) puede tomar valores de 00 a FF. Por lo tanto, el símbolo de color se divide en tres componentes #rrggbb, donde los dos primeros símbolos indican el componente rojo del color, los dos del medio, verde y los dos últimos, azul.</p>
<p><b>Valor por defecto</b><br>Depende de la configuración del navegador y del sistema operativo.</p>
<p><b>Similar a CSS</b><br>borde</p>
<p>Ejemplo 3: cambiar el color del borde</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5><br><frame src=left.html name=leftFrame><br><frameset rows="80,*" bordercolor=red
border=5><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Parámetro COLS</h4>
<p><b>Descripción</b><br>Especifica los tamaños o proporciones de las columnas del marco en una estructura FRAMESET. Si se crean varias columnas, el parámetro cols se debe establecer en un valor específico. Hay tres opciones para esto:</p>
<ol><li>tamaño en píxeles;</li>
</ol><p>Utilice un valor de píxel cuando desee establecer el tamaño del marco en un ancho determinado. Esto es especialmente útil para mostrar contenido de un tamaño determinado, como una imagen. Es conveniente utilizar porcentajes para la división proporcional de fotogramas; en este caso, independientemente del tamaño de la ventana del navegador, las proporciones se mantendrán, lo principal es que el ancho total de las columnas sea igual al 100%. Si los valores no suman 100%, el navegador mostrará los marcos, pero el ancho no se establecerá con precisión. Finalmente, si es necesario asignar el espacio restante a un marco, se utiliza el símbolo de asterisco. En este caso, el navegador calcula el ancho del marco cuando ya se han establecido los tamaños para los demás marcos. Se permite mezclar tipos de valores individuales enumerándolos separados por comas. Luego, la tarea de calcular el ancho requerido recae en el navegador.</p>
<p><b>Sintaxis</b><br><frameset cols="ширина 1, ширина 2, ...">...</frameset></p>
<p><b>Argumentos</b><br></p>
<p><b>Valor por defecto</b><br>100%</p>
<p>Ejemplo 4: ancho del marco</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%"
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Parámetro BORDE DE MARCO</h4>
<p><b>Descripción</b><br>Determina si se mostrará el borde entre fotogramas o no. El navegador Opera muestra una línea delgada de todos modos, a menos que se utilice framespace=0.</p>
<p><b>Sintaxis</b><br><frameset frameborder=yes | no>...</frameset><br><frameset frameborder=1 | 0>...</frameset></p>
<p><b>Argumentos</b><br>Puedes usar sí o 1 para mostrar el borde y no o 0 para ocultarlo.</p>
<p><b>Valor por defecto</b><br>De forma predeterminada, esta opción está habilitada.</p>
<p>Ejemplo 5: ocultar el borde entre fotogramas</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%" frameborder=no
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Parámetro ESPACIAMIENTO DE MARCOS</h4>
<p><b>Descripción</b><br>El parámetro framespaceing es análogo al frameborder y está destinado a establecer el tamaño del borde entre fotogramas. La razón por la que hay dos atributos diferentes con propiedades similares es que el espacio de cuadros es una configuración más antigua y los navegadores lo admiten por compatibilidad con versiones anteriores.</p>
<p><b>Sintaxis</b><br><frameset framespacing=значение>...</frameset></p>
<p><b>Argumentos</b><br>Un número entero positivo. Con framespace=0, el navegador Opera oculta completamente los bordes entre fotogramas e Internet Explorer establece sus parámetros por defecto. Este atributo es completamente ignorado por el navegador Netscape.</p>
<p><b>Valor por defecto</b><br>2</p>
<p>Ejemplo 6. Ocultar el borde entre fotogramas</p>
<blockquote>
<p><html><br><frameset cols="150,*" framespacing=0
frameborder=0><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html></p>
</blockquote>
<h4>parámetro FILAS</h4>
<p><b>Descripción</b><br>Especifica la altura o relación de aspecto de los fotogramas en una estructura FRAMESET como filas. Si se crean varias filas, el parámetro de filas se debe establecer en un valor específico. Hay tres opciones para esto:</p>
<ol><li>tamaño en píxeles;</li>
<li>tamaño como porcentaje del ancho del marco disponible;</li>
<li>El símbolo de asterisco (*) representa todo el ancho libre restante después de especificar las dimensiones en píxeles o porcentajes.</li>
</ol><p>La conveniencia de utilizar el parámetro de filas junto con el valor * es que el marco se puede definir en la parte inferior de la ventana del navegador. Cuando necesite crear una cuadrícula uniforme de marcos, utilice los parámetros de filas y cols en la etiqueta FRAMESET. Para una estructura más compleja, necesitas anidar una etiqueta FRAMESET dentro de otra.</p>
<p><b>Sintaxis</b><br><frameset rows="высота 1, высота 2, ...">...</frameset></p>
<p><b>Argumentos</b><br>Valores enumerados, separados por comas, como píxeles (no se requieren px u otras marcas), porcentajes o el símbolo *.</p>
<p><b>Valor por defecto</b><br>100%</p>
<p>Ejemplo 7: altura del marco</p>
<blockquote>
<p><html><br><frameset rows="*,100"
><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html</p>
</blockquote>
<p>Los marcos son elementos HTML que le permiten dividir la ventana de un navegador web en varias ventanas independientes, cada una de las cuales puede cargar un documento HTML independiente. Cada una de estas ventanas (marco) puede tener sus propias barras de desplazamiento y funcionar independientemente de otras ventanas independientes o, por el contrario, controlar su contenido. Se pueden utilizar para organizar un menú que se encuentra constantemente en una ventana, mientras que la información en sí se encuentra en otra ventana. Los usuarios pueden acceder al menú en cualquier momento y no tienen que volver a la página anterior para seleccionar otro elemento del menú. El uso de marcos le permite "fijar" imágenes u otros elementos estáticos de la interfaz en la ventana del navegador mientras el resto de la página se desplaza dentro del marco. <br>Sin embargo, vale la pena señalar que hoy en día los marcos se consideran una herramienta obsoleta y los sitios con marcos ahora se consideran indignos, ya que los webmasters profesionales nunca usan marcos en sus proyectos. Los marcos tienen una serie de problemas notorios. Confunden a los motores de búsqueda, por ejemplo, porque las páginas que contienen el contenido no enlazan con otros documentos. Si quieres conseguir visitas de los motores de búsqueda, olvídate de los marcos. Es imposible que un usuario coloque una página que le guste en la sección de marcadores del navegador, ya que los marcos ocultan la dirección de la página en la que se encuentra y siempre muestran solo la dirección del sitio web. Por este motivo, crean problemas a los navegadores a la hora de rastrear el historial, y además son poco adaptables a diferentes tamaños de pantalla y dispositivos móviles. <br>A pesar de que los proyectos con marcos son cada vez más escasos en la World Wide Web, aprender HTML estaría incompleto sin considerar el tema de los marcos. Los marcos, además de sus desventajas, también tienen algunas ventajas que no nos permiten descartar esta tecnología por poco prometedora.</p>
<h2>Creando marcos</h2>
<p>La estructura de un documento HTML con marcos es muy similar en apariencia al formato de un documento HTML normal. Como en un documento HTML normal, todo el código se coloca entre etiquetas emparejadas. <b><html>
</b> Y <b></html>
</b>, y en el contenedor <b><head>
</b> se ubican los encabezados. La principal diferencia entre un documento con marcos y un documento HTML normal es que un documento con marcos en lugar de una etiqueta <b><body>
</b> se aplica la etiqueta emparejada <b><frameset>
</b>(del conjunto de marcos en inglés - un conjunto de marcos). <br>El siguiente ejemplo muestra la estructura de un documento HTML con marcos:</p>
<h3>Ejemplo: estructura de documento HTML con marcos</h3>
<ul><li>Inténtalo tú mismo "</li>
</ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">marco_top</td>
</tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">marco_izquierda</td>
<td style="width: 80%;background-color:lime;color: white;">marco_derecho</td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Documento con marcos</title>
</head>
<frameset rows="100, *">
<frame src="frame_top.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
<noframes>
]]>
