Cómo insertar un iframe en HTML: ejemplo de uso. El concepto de marco en HTML Marcos en ejemplos HTML con hipervínculos

09.02.2022

Comencemos con la estructura del marco. ¿Cuál es su esencia? Tenemos la oportunidad en el documento que cargamos en el navegador de organizar áreas especiales tipo ventana. Puede cargar otros documentos individuales (páginas web) en estas áreas.

¿Por qué es esto necesario? Dado que los documentos se cargan en sus propias áreas separadas, se comportan de forma independiente. Es decir, puede hacer algo en un documento, mientras que otros documentos permanecen sin cambios.

¿Dónde se pueden encontrar tales estructuras de marco? Estos son archivos de ayuda (con la extensión .chm).

A continuación se muestra un ejemplo sencillo de un documento con marcos:

Marcos de ejemplo Estás viendo esta página utilizando un navegador que no admite marcos.

Elemento conjunto de cuadros. Su trabajo es cubrir el área de visualización y dividirla en áreas separadas. Aquellos. Indique al navegador en qué proporción y cómo (horizontal o verticalmente) dividimos estas áreas.

Elemento marco– describe cada una de estas áreas individuales. Etiqueta única. Ocupa las dimensiones especificadas en el conjunto de marcos.

Elemento sin marcos- se muestra si el navegador no admite marcos.

Tenga en cuenta que no hay ningún elemento de cuerpo. En su lugar, se utiliza el elemento frameset. Esta es una de las razones por las que ya no se utilizan marcos en los sitios web.

Atributos del elemento del conjunto de marcos

  • cols: división vertical de la página en áreas de visualización.
  • filas: división horizontal de la página en áreas de visualización.

elemento de marco

Este elemento describe un área de ventana única. Puede cargar cualquier documento en él utilizando el atributo src. Ejemplos:

Atributo desplazamiento- desplazamiento (automático por defecto). Si el documento excede el área de visualización de este marco, se produce desplazamiento. Si el documento encaja completamente dentro del marco, entonces no se produce desplazamiento. El desplazamiento se puede desactivar, pero es mejor dejarlo en automático.

Atributo único noresize- prohíbe cambiar el tamaño del marco en el navegador. Por defecto esto está permitido.

Atributo Frontera del marco- cuadro por cuadro. Valor '1' - empate, valor '0' - no sorteo. Sólo estos dos valores son válidos. De forma predeterminada, el marco está dibujado.

Atributo ancho de margen– indica la distancia que el contenido de un fotograma determinado se alejará horizontalmente de los fotogramas de este fotograma.

Atributo altura del margen– sangría vertical desde el contenido hasta los bordes del marco.

marco flotante integrado

Elemento marco flotante('ventana de línea'). Este elemento está emparejado (hay una etiqueta de apertura y cierre). Este elemento tiene el mismo propósito: organizar un elemento de ventana en el documento.

¿En qué se diferencia de los marcos antiguos? Es autosuficiente y no necesita contenedores adicionales. Y puede aparecer en cualquier documento, es decir, donde hay un elemento de cuerpo.

Un elemento iframe es un elemento en línea con contenido reemplazable. Aquellos. Se forma un área de tipo de línea con dimensiones abstractas y el contenido de algún documento externo (archivo html) se carga en esta área.

Iframe tiene los mismos atributos que las imágenes (ya que son del mismo tipo): nombre, ancho, alto, src, frameborder, desplazamiento, hspace, vspace, marginwidth, marginheight.

Buen día a todos. Alexey Gulynin está en contacto. En el último artículo vimos cómo instalar un favicon en un sitio web. En este artículo me gustaría contarte qué es. marcos en html. Traducido del inglés. marco significa "marco". Desde el punto de vista de HTML, un marco es un área seleccionada determinada en una página que enlaza con otra página y muestra su contenido (esa misma otra página o sitio). Vale la pena señalar de inmediato que los marcos no han recibido mucho desarrollo y ahora casi nunca se usan, excepto en algunos proyectos especializados. Lo mismo se puede hacer usando CSS y Javascript.
Mediante un marco se puede dividir una página en varios bloques, cada uno de los cuales será independiente de los demás. Creemos el documento principal index.html y dos documentos auxiliares (internos), cuyo contenido se mostrará en la página principal: menu.html (contendrá el marcado de navegación del sitio) y content.html (contenido del sitio). El marcado index.html se verá así:

Marcos en HTML

Tenga en cuenta que no hay ninguna etiqueta aquí. , apareció la etiqueta en su lugar . Esta etiqueta tiene varios atributos:

  • cols: este atributo especifica que los marcos se colocarán en columnas. El valor de este atributo especifica los tamaños de fotograma separados por comas. En nuestro caso tendremos 2 cuadros. El ancho del primero será el 40% del ancho de la página, * significa el resto del espacio de la página (en este caso se podría escribir 60%). El tamaño también se puede especificar en píxeles.
  • filas: este atributo especifica que los marcos se colocarán en filas.

El contenido del archivo menu.html tiene este aspecto:

  • 1 elemento de menú
  • 2 elementos del menú
  • 3 elementos del menú

El contenido del archivo content.html tiene este aspecto:

Marcos de prueba

Párrafo de texto

Para mostrar el contenido de otro documento es necesario utilizar la etiqueta con el atributo src, cuyo valor indica la ruta al archivo. También puede especificar la URL del sitio que queremos mostrar en este bloque. Primero, generemos nuestras páginas menu.html y content.html:

Asegúrese de escribir este código para ver cómo funciona todo.

La etiqueta de marco tiene los siguientes atributos:

  • src: ruta a la página o dirección URL del sitio (página del sitio). Vale la pena señalar que algunos sitios tienen protección contra incrustaciones,
  • nombre: asigna al marco un nombre con el que se puede administrar este marco,
  • noresize: prohíbe cambiar el tamaño del marco,
  • desplazamiento: capacidad de desplazarse por el contenido.

Para la tarea, crea 2 cuadros y colócalos en una línea. Especifique la ruta a los sitios como valor del atributo src.

Muchos sitios web modernos cuentan con menús de navegación "fijos" que aparecen en la barra lateral o en la parte superior a medida que se desplaza hacia arriba y hacia abajo en la página. Pero las propiedades CSS que le permiten crear menús fijos no siempre son compatibles con los navegadores. Anteriormente, los marcos HTML se utilizaban para implementar funciones similares.

Diferencia entre marcos e iframes

Cuando utiliza un conjunto de marcos, divide la parte visible de la ventana del navegador en varios marcos. Cada fotograma tiene su propio contenido, que no afecta al contenido del siguiente. Los marcos y los iframes realizan una función similar: incorporan un recurso en una página web, pero son fundamentalmente diferentes entre sí:

  • Los marcos son los elementos que definen el diseño;
  • Los iframes son elementos que añaden contenido.

Historia y futuro de los marcos.

Marcos obsoletos del W3C en HTML5. El motivo de esta decisión fue que los marcos HTML tienen un impacto negativo en la usabilidad y accesibilidad. Veamos si estas afirmaciones están justificadas.

Problemas con los marcos.

  • Problemas de usabilidad: Con la creciente popularidad de los dispositivos móviles con pantallas pequeñas, existe la necesidad de que los sitios ofrezcan a los usuarios múltiples vistas que cambien según el tamaño de la ventana gráfica. Si bien los marcos se pueden manipular para proporcionar cierto grado de capacidad de respuesta, no son muy adecuados para crear sitios web responsivos;
  • Accesibilidad: los lectores de pantalla y otras tecnologías de asistencia son bastante difíciles de leer e interactuar con sitios que utilizan marcos.

Actualmente existe una tendencia mundial en el desarrollo web de separar el contenido de una página web de su presentación:

  • El contenido debe agregarse y definirse mediante marcado, por ejemplo mediante HTML;
  • La presentación está definida por lenguajes como CSS y JavaScript.

El uso de marcos implica inicialmente crear una apariencia y estructura específicas, mientras que las tareas de presentación deben manejarse usando CSS.

El futuro de los marcos

Aunque hoy en día todos los navegadores modernos admiten marcos, El W3C ha declarado claramente que enmarca" no debe ser utilizado por desarrolladores web". Si tiene un sitio que utiliza marcos, debería considerar cambiar a otras tecnologías. En algún momento, los navegadores ya no admitirán marcos y, cuando eso suceda, los sitios que los utilicen quedarán inutilizables.

Cómo hacer marcos en HTML

No se deben utilizar marcos al desarrollar sitios nuevos, pero para los webmasters que mantienen recursos antiguos, saber cómo utilizarlos puede resultar útil.

Concepto básico de marcos.

El concepto básico de marcos es bastante simple:

  • Utilice el elemento de conjunto de marcos en una ubicación específica del elemento cuerpo en un documento HTML;
  • Utilice el elemento marco para enmarcar el contenido de la página web;
  • Utilice el atributo src para identificar el recurso que debe cargarse dentro del marco;
  • Cree un archivo de contenido independiente para cada marco HTML.

Veamos algunos ejemplos de cómo funciona esto. Primero necesitamos crear algunos documentos HTML con los que trabajaremos. Creemos cuatro documentos HTML diferentes. Esto es lo que contendrá el primero:

Cuadro 1

Contenido del cuadro 1



Guardaremos el primer documento como frame_1.html. Los tres documentos restantes tendrán contenido similar y se denominarán en consecuencia.

Crear columnas verticales

Para crear un conjunto de cuatro columnas verticales, debe utilizar un elemento de conjunto de marcos con el atributo cols. El atributo cols se utiliza para determinar el número y tamaño de las columnas que contendrá el conjunto de marcos. En nuestro caso, tenemos cuatro archivos para mostrar. Por tanto, necesitamos cuatro fotogramas.

Para crearlos, necesitamos establecer el atributo cols en cuatro valores, separados por una coma. Para simplificar, asignaremos a cada uno de los marcos un valor de *, esto los establecerá en un tamaño que llenará automáticamente todo el espacio disponible. Así es como se verá nuestro marcado HTML:

Y así es como se mostrará este marcado:

Crear filas horizontales

Las filas del marco HTML se pueden crear usando el atributo de filas en lugar del atributo cols como en el ejemplo anterior:

Al realizar este cambio, logramos que los fotogramas ahora se carguen en cuatro filas, una encima de la otra:

Fusionar columnas y filas

Se pueden mostrar columnas y filas de marcos simultáneamente en la misma página. Puedes anidar un marco dentro de otro. Para hacer esto, primero creamos un conjunto de marcos y luego anidamos el conjunto de marcos secundario dentro del elemento principal. A continuación se muestra un ejemplo de cómo se pueden anidar dos filas dentro de un conjunto de tres columnas:

conjunto de marcos cols="*,*,*">

Ejemplo de marco HTML:

El conjunto de marcos anidados se encuentra dentro del elemento principal, el primer marco. El elemento anidado se puede colocar en cualquier lugar. Por ejemplo, si queremos que el elemento anidado se coloque en el centro, simplemente reorganizamos los elementos de la siguiente manera:

Así es como aparecerán los marcos ahora:

Puedes crear otros marcos anidados:

Este código crea un conjunto de dos columnas del mismo tamaño. Luego dividimos la segunda columna en dos filas. Y finalmente, dividimos la segunda fila en dos columnas. Así es como se verá:

Otra forma de crear una combinación de filas y columnas es definir una cuadrícula de columnas y filas en un solo marco. Por ejemplo, si quisieras crear una cuadrícula de cuatro cuadros del mismo tamaño, podrías usar el siguiente código:

La cuadrícula resultante de filas y columnas se verá así:

Cómo diseñar marcos

Cuando se trata de diseñar una página web que utiliza marcos en HTML, hay dos formas de asignar estilos:

  • Definir estilos dentro de cada cuadro;
  • Definición de estilos para conjuntos de marcos.

La representación de cada fotograma debe definirse dentro del documento fuente. La vista del conjunto de marcos debe definirse dentro del documento principal que contiene el conjunto de marcos. En otras palabras, los estilos para frame_1.html deben establecerse mediante las reglas CSS contenidas en el archivo frame_1.html o en la hoja de estilos asociada con el archivo frame_1.html.

Definir estilos de marco en el documento fuente

Como ocurre con cualquier página web, el contenido de cada marco se puede diseñar mediante CSS. Para aplicar estilo al contenido de cada marco, se debe agregar al documento principal, ya sea vinculándolo a un archivo de estilo externo o agregando estilos internos o en línea. Teniendo en cuenta que tenemos cuatro documentos fuente, los estilos CSS deben aplicarse a cada documento por separado.

Al aplicar estilos CSS a una página web que contiene un conjunto de marcos, no podremos aplicar estilos a cada marco individualmente. Si queremos darle estilo a frame_1.html, debemos agregar esos estilos directamente al documento. A continuación se muestra un ejemplo de cómo se puede hacer esto:

Cuadro 1

Contenido del cuadro 1



Si volvemos a nuestro ejemplo anterior de creación de marcos en HTML con cuatro columnas del mismo tamaño y cargamos el conjunto de marcos después de realizar estos cambios en el archivo frame_1.html, obtenemos esto:

Definición de estilos y formato de conjuntos de marcos

Cómo influir en la presentación del conjunto de marcos más allá de definir los estilos de los propios documentos:

  • El tamaño de cada cuadro se puede definir o fijar;
  • El espacio entre cuadros se puede cambiar;
  • Se puede especificar el formato del borde alrededor de cada cuadro.

Estos cambios no se realizan a través de CSS. Esto se hace agregando atributos y sus valores al elemento del marco.

Tamaño del marco

Los tamaños de los fotogramas se pueden especificar en píxeles, porcentajes o los fotogramas pueden ocupar automáticamente todo el espacio disponible. Para especificar el tamaño del marco, inserte el valor deseado en el atributo cols o filas. De forma predeterminada, si un marco no tiene especificado el atributo noresize, los visitantes del sitio pueden usar el mouse para arrastrar el borde entre dos marcos y cambiar su tamaño. Si no se desea esto, al elemento de marco se le puede aplicar el atributo noresize y no se podrá cambiar su tamaño. Combinemos ambos conceptos en la práctica.

Crearemos el siguiente diseño:

  • Una fila de ancho completo en la parte superior de la página;
  • Tres columnas debajo de la fila superior;
  • La primera y tercera columnas tienen un tamaño para crear barras laterales izquierda y derecha;
  • La columna del medio tiene un tamaño que representa un área de contenido más grande.

Podemos crear un marco HTML usando el siguiente código:

Este código crea un conjunto de marcos de dos filas:

  • La primera fila tiene 150 píxeles de alto. El atributo noresize especificado para el primer fotograma significa que su tamaño no se puede cambiar;
  • Los estilos que aplicamos anteriormente a frame_1.html se conservan, pero sólo afectan el contenido de ese marco;
  • La segunda fila se expande para llenar el espacio restante;
  • El segundo conjunto de marcos está anidado en la segunda fila y contiene tres columnas;
  • La primera y la tercera columna ocupan cada una el 20% del espacio disponible en la ventana del navegador;
  • La segunda columna se expande para llenar el espacio que queda entre la primera y la tercera columna;
  • Como no especificamos el atributo noresize para las columnas, inicialmente se mostrarán según los tamaños especificados en el código.

Pero un visitante del sitio podrá cambiar su tamaño manualmente.

Este código crea una página web que se representa así:

Formatear el borde y rellenar alrededor del marco

Ahora que hemos definido el diseño, si es necesario, podemos aumentar o disminuir el relleno entre cuadros, así como eliminar el borde entre ellos. Usando el diseño que creamos en el paso anterior, eliminemos los bordes entre las tres columnas, pero dejemos el borde entre las filas superior e inferior. También agreguemos algo de relleno alrededor del contenido del primer marco HTML:

El atributo marginheight aplicado al primer fotograma agrega 15 píxeles de margen por encima y por debajo del contenido cargado en el primer fotograma. Un valor de borde de marco de 0 elimina los bordes de los tres marcos inferiores. Así es como se verá:

Especificación de marcos mediante vínculos

Uno de los usos más comunes de los marcos es crear un menú de navegación "fijo" dentro de un marco que siempre esté visible independientemente de la posición del contenido de otros marcos. Cuando se usan correctamente, los enlaces en el menú de navegación hacen que se carguen nuevos recursos en el marco mientras el resto del marco permanece estático.

Puede formatear anclajes para apuntar a marcos específicos dándole al elemento de marco deseado un atributo de nombre y usando el atributo de destino dentro del elemento a para cargar el href en el marco especificado. Si todo esto le resulta un poco confuso, le guiaremos paso a paso por el proceso de creación de marcos en HTML.

En primer lugar, debemos asignar un nombre al marco en el que se deben abrir los enlaces. En el diseño que creamos anteriormente, podemos usar la columna izquierda para el menú de navegación y la columna central como marco de destino. Para hacer esto, debe asignar un atributo de nombre al elemento de destino:

Ahora que hemos configurado name="mid_col" para la columna central, podemos crear varios enlaces en el documento fuente de nuestra columna izquierda frame_2.html:

Cuadro 2

Contenido del cuadro 2

  • Cargar frame_1.html
  • Cargar frame_2.html
  • Cargar frame_3.html
  • Cargar frame_4.html


Ahora, cuando cargamos la página web, la barra lateral izquierda albergará cuatro enlaces de navegación. Cuando se hace clic en el enlace, el contenido del archivo se carga en el marco de la columna central con el atributo name="mid_col" . Esto es lo que veremos cuando cargue la página:

Si hacemos clic en el enlace Cargar frame_1.html, el contenido de este archivo se cargará en la columna central y obtendremos lo siguiente:

Si hacemos clic en el enlace Cargar frame_2.html, veremos que tanto la barra lateral izquierda como la columna central mostrarán enlaces de navegación:

Al hacer clic en los enlaces Cargar frame_3.html y Cargar frame_4.html en la columna central se cargará el contenido de estos archivos. Si olvidamos agregar el atributo target="mid_col" para uno de los enlaces, cuando haga clic en él, el archivo se cargará en el marco que contiene el enlace. Si queremos recargar toda la página, por ejemplo, al seguir un enlace a un sitio externo, debemos agregar el atributo target="_blank" o target="_top".

Proporcionar una alternativa sin marcos

En el pasado, el elemento noframes se utilizaba para proporcionar un respaldo para los navegadores que no soportan marcos HTML. Actualmente, todos los navegadores modernos admiten marcos, pero los noframes prácticamente no son compatibles. Como resultado, ya no necesitamos crear un respaldo sin marcos cuando trabajamos con marcos.

Cómo hacer que los marcos respondan

Cuando se utilizan marcos, es bastante difícil garantizar la facilidad de uso para los visitantes que acceden al sitio desde teléfonos inteligentes y tabletas pequeñas. Dado que los marcos se han eliminado por completo de HTML5 y se consideran obsoletos, es importante que los propietarios de sitios creados con marcos planeen reconstruir sus recursos y migrar a otras tecnologías.

Usar filas en lugar de columnas

Si es posible, organice los marcos en filas en lugar de columnas. En una pantalla pequeña, es mucho más fácil navegar por el contenido verticalmente que horizontalmente. Los marcos HTML dispuestos en fila son mucho más fáciles de ver en una pantalla pequeña. Si reducimos el ancho de los diseños que contienen filas y columnas, simulando la pantalla del Apple iPhone 6, vemos que las filas son mucho más fáciles de ver que las columnas:

Utilice porcentajes para anchos de columna

Cuando los tamaños de las columnas se establecen en porcentajes en lugar de píxeles, su tamaño cambiará automáticamente según el tamaño de la pantalla del dispositivo. Si bien esto puede crear algunos problemas ya que algunos fotogramas pueden volverse demasiado pequeños, la interacción general y la experiencia de visualización serán mejores si el ancho total de las columnas se especifica en porcentajes en lugar de píxeles.

Cómo pasar de marcos a otras tecnologías

Tanto el elemento frameset como el elemento frame se han eliminado de la última especificación HTML5. Los propietarios de sitios creados con marcos deben reconstruir sus activos para eliminarlos del diseño. En algún momento, los navegadores dejarán de admitir marcos. Por lo tanto, abandonar los marcos no sólo es deseable, sino que debe hacerse.

Evaluación del contenido contenido en marcos.

El primer paso para rediseñar un sitio que utiliza iframes HTML es identificar las razones por las que se utilizan marcos:

  • ¿Se utilizaron marcos para crear un diseño específico? Si es así, se puede utilizar CSS para crear un diseño similar;
  • ¿Se utilizaron marcos para crear un tamaño de contenedor de anuncios específico? Hay muchas formas de recrear este efecto usando CSS o widgets diseñados para funcionar con CMS;
  • ¿Se han utilizado marcos para crear menús de navegación fijos? Nuevamente, se puede recrear el mismo efecto usando CSS;
  • ¿Se utilizaron marcos para cargar contenido desde un sitio externo? Si es así, entonces el elemento iframe, que forma parte de HTML5, se puede utilizar para incrustar contenido de un sitio externo.

En casi todos los casos, puedes usar CSS para recrear un diseño diseñado usando marcos, y los iframes se pueden usar para incrustar recursos externos.

Estrategia para tu nuevo sitio web

Si su sitio se creó utilizando marcos, es muy probable que ya esté muy desactualizado. En lugar de simplemente compilar todo el contenido de su sitio en un archivo HTML y diseñarlo con CSS, tal vez sea hora de pensar en actualizar a un sistema de gestión de contenido.

Al principio, cambiar a un CMS llevará más tiempo, pero a largo plazo, los beneficios de tener un sitio web moderno superarán los desafíos a corto plazo. Para ayudarte a decidirte por un sistema de gestión de contenidos, te recomendamos prestar atención a los tres más populares:

  • WordPress;
  • Joomla! ;
  • Drupal.

Recursos adicionales

Si desea obtener más información sobre los marcos HTML, la mejor fuente para obtener más información es el World Wide Web Consortium ( W3C). Estas son algunas de las páginas con información sobre marcos:

  • Documentación HTML4 sobre marcos;
  • Funciones HTML5 obsoletas

Artículos relacionados

Nombre del árticulo Atributos Descripción
sin marcos Elemento usado dentro del padre <frameset>para proporcionar una versión alternativa del contenido para los usuarios cuyos navegadores no admitían <frame>. Actualmente las monturas son una tecnología obsoleta, por lo que el elemento <noframes>No debería ser usado.</td> </tr><tr><td>marco flotante</td> <td>salvadera</td> <td><iframe>crea un marco en línea que genera un documento HTML independiente en el documento actual.</td> </tr><tr><td>conjunto de cuadros</td> <td>Frontera del marco</td> <td>Elemento <frameset>se utiliza para crear un grupo de marcos que se pueden manipular y diseñar como uno solo. Actualmente marcos en HTML <p>Constantemente escucho a diseñadores novatos quejarse de que cuando necesitan combinar una imagen y un fondo, se ve diferente en diferentes navegadores. Muchos dicen que no hay salida. Yo también lo pensé y constantemente creé javascript que seleccionaría.</p> <p>Una ventana modal es uno de los elementos de interfaz de usuario más utilizados que podemos encontrar en los sitios web de la World Wide Web. A menudo se utiliza para mostrar un formulario de suscripción, un formulario de carga de archivos.</p> </td></tr></tbody></table> <p>La palabra "marco" significa marco, marco. Mediante marcos, el espacio de la ventana del navegador se divide en secciones independientes en las que se puede mostrar diversa información. Es conveniente utilizar marcos cuando necesita mostrar datos de varias fuentes en la pantalla.</p><p>Nota 1</p> <p>Los marcos dividen la ventana de visualización del navegador en varias subáreas rectangulares que se encuentran una al lado de la otra. En estas subáreas se pueden cargar documentos HTML individuales y visualizarlos independientemente unos de otros. Si es necesario, puede organizar la interacción entre marcos seleccionando un enlace en uno de los marcos, lo que conducirá a cargar el documento deseado en otro marco o ventana del navegador.</p><h2>Áreas de aplicación de marcos.</h2><p>Los desarrolladores de documentos HTML tienen a su disposición una amplia variedad de formas para presentar información en las páginas. La información gráfica y de texto se puede ordenar y organizar mediante listas, tablas, opciones de alineación, establecimiento de líneas horizontales y divisiones de párrafos. Pero estas capacidades no siempre son suficientes; en tales casos, es necesario dividir la ventana de visualización del navegador en áreas separadas (marcos).</p> <p>La elección de la estructura del marco para presentar información en la WWW se justifica por:</p><ul><li>al organizar el control de carga de un documento en una de las subáreas de la ventana de visualización del navegador mientras se trabaja simultáneamente en otra subárea;</li> <li>cuando se ubica en un lugar determinado de la ventana de visualización, información que siempre estará en la pantalla independientemente del contenido de otras subáreas de la pantalla;</li> <li>al mostrar información convenientemente ubicada en varias subáreas de la ventana, cada una de las cuales se puede ver independientemente de las demás.</li> </ul><p>La siguiente figura muestra la estructura del marco de una ventana del navegador de páginas HTML.</p><p>Esta estructura es más típica en los casos en que algunos marcos sirven como tabla de contenido para documentos, mientras que otros se utilizan para cargar su contenido. Anteriormente, esta tarea se resolvía de esta manera sin utilizar marcos. En una de las páginas había un índice, que constaba de enlaces a otros documentos o determinados fragmentos. Cuando hacía clic en dicho enlace, la tabla de contenido desaparecía y en su lugar se cargaba un documento, después de leerlo, tenía que volver a la tabla de contenido nuevamente. Cuando se empezaron a utilizar marcos, este retorno dejó de ser efectivo, ya que el índice comenzó a ubicarse de forma permanente en parte de la pantalla.</p> <p>Los marcos son intrínsecamente similares a las tablas, ya que ambos los utilizan para dividir la ventana del navegador en áreas rectangulares con información ubicada en ellas. Sin embargo, los marcos le permiten no solo formatear las páginas del documento, sino también organizar la interacción entre ellas. Básicamente, los marcos y las tablas se diferencian en que cada marco corresponde a un documento HTML independiente y el contenido de todas las celdas de la tabla son parte de un documento. Además, la página que se muestra en el marco puede desplazarse cuando se ve independientemente de las demás. Cada cuadro es una especie de mini navegador independiente. Las tablas, a diferencia de los marcos, que siempre se presentan completamente en la pantalla, a menudo no pueden caber completamente en la ventana y solo se ven en partes. Por lo tanto, se puede observar que en las tablas HTML el número total de celdas no está limitado y a veces llega a varios cientos, el número de cuadros en un documento suele ser de varias unidades.</p><h2>Creando marcos</h2><p>Las etiquetas se utilizan para crear marcos.</p><p>El descriptor forma conjuntos de marcos que dividen los espacios de la ventana en filas y columnas. Luego, la altura y el ancho de todas las filas y columnas se establecen como un porcentaje de las dimensiones actuales de la ventana del navegador, en píxeles o como un asterisco. El símbolo de asterisco indica que los tamaños de los marcos dependen de las dimensiones de otros marcos de la página.</p><p>El descriptor define la estructura y el contenido de un marco particular.</p><p>A continuación se muestra un ejemplo del código de la página.</p><p>Un ejemplo de trabajo con marcos.</p><h2>Ventajas y desventajas de los marcos.</h2><p>Las ventajas de los marcos incluyen las siguientes:</p><ul><li>pueden mostrar simultáneamente diversa información en una ventana;</li> <li>con su uso es posible mostrar permanentemente alguna información (logotipos), sin necesidad de incluirla en cada página del sitio;</li> <li>ayudan a crear una navegación flexible en el sitio.</li> </ul><p>Las desventajas de los marcos incluyen:</p><ul><li>su principal ventaja (mostrar información en una ventana), ya que el área accesible de la página web a este respecto se vuelve significativamente menor;</li> <li>elegir el tamaño de marco correcto al crearlo suele ser difícil, ya que el usuario tiene que desplazarse constantemente por el marco utilizando barras de desplazamiento;</li> <li>en monitores con resoluciones de pantalla bajas, la cantidad de información visible es significativamente menor;</li> <li>Muchos motores de búsqueda y directorios se niegan a registrar páginas que utilicen marcos.</li> </ul><p>Nota 2</p> <p>Otra desventaja es que algunos navegadores no pueden procesar fotogramas. En este caso, solo aparece una pantalla en blanco frente al usuario. Para ayudar al usuario en esta situación, se diseña una etiqueta que permite mostrar el texto colocado entre las etiquetas de apertura y cierre cuando no se puede mostrar el marco.</p><h2>Barras de desplazamiento del marco</h2><p>De forma predeterminada, el navegador solo mostrará barras de desplazamiento cuando la información no se ajuste a las dimensiones del marco. Para hacer esto, el atributo DESPLAZAMIENTO se establece en uno de los valores sí (no), lo que permite al navegador ocultar siempre las barras de desplazamiento o mostrarlas siempre. Ocultar las barras de desplazamiento le permite aumentar el tamaño del área del marco visible. Al mismo tiempo, si los datos no caben en la ventana, quedarán inaccesibles para el usuario.</p><h2>Cambiar los límites del marco</h2><p>Se puede desactivar el cambio de los límites del marco, esto se hace usando el atributo NORESIZE. Este atributo es conveniente de usar cuando necesita evitar que el usuario cambie el diseño de la página original. De forma predeterminada, el usuario tiene la posibilidad de mover los bordes del marco a su discreción; puede establecer nuevas dimensiones del objeto para mejorar la visualización de un determinado dato. En los casos en que los marcos no tengan bordes visibles, esto prohibirá automáticamente cambiar su tamaño. Usando el atributo BORDER de una etiqueta, puede cambiar el grosor de las líneas del borde del marco. De forma predeterminada, el navegador enmarca el marco con un marco gris y un grosor de 6 píxeles. El atributo BORDERCOLOR le permite cambiar el color del borde. El atributo FRAMEBORDER le permite ocultar los bordes de un marco.</p><p>De forma predeterminada, el navegador muestra marcos con un margen de 10 píxeles entre el texto y el borde del marco.</p><p>El atributo MARGINWIDTH especifica el ancho de los márgenes izquierdo y derecho.</p><p>Y el atributo MARGINHEIGHT determina la altura de los márgenes superior e inferior.</p><p>Al configurar el tamaño de los campos, debe utilizar ambos atributos, ya que el navegador puede reducir automáticamente el tamaño de los campos no especificados al valor mínimo.</p><h2>Marcos flotantes</h2><p>Los marcos inactivos son parte de una página web y no requieren una página separada que los describa. Se utiliza una etiqueta para crear dichos marcos. El atributo NAME de esta etiqueta especifica el nombre del marco flotante, que luego se puede usar para definir un hipervínculo que abre la página correspondiente en este marco. Los atributos WIDTH y HEIGHT especifican las dimensiones del marco flotante, ya que el usuario no tiene la capacidad de cambiarlas por sí mismo.</p><p>Actualmente, los marcos flotantes sólo son compatibles con Microsoft IE.</p><p>A continuación se muestra un ejemplo del código de la página:</p><p>Ejemplo 1</p> <p>Un ejemplo de trabajo con marcos.</p> <p>ancho="350" alto="300" align="izquierda"></p> <p>Un ejemplo de trabajo con marcos.</p> <p>Un ejemplo de trabajo con marcos.</p> <h1>marcos en html</h1> <i>Ejemplo de estructura de marco</i><p>La ventana del navegador se puede dividir en marcos, es decir. en áreas ubicadas una al lado de la otra. Puede cargar sus propias páginas HTML en cada una de estas áreas. Quedará más claro con un ejemplo, crea un nuevo archivo llamado index.html con el siguiente código:</p><p>marcos en html</p><br>En la ventana del navegador se verá así: <p><img src='https://i2.wp.com/site-do.ru/images/html33.gif' width="100%" loading=lazy loading=lazy></p><p>La ventana del navegador está dividida en 3 partes. Debo decir que este es el único caso en el que no hay etiquetas en un documento html. <i><body><script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </i>. En su lugar se utilizan etiquetas <i><frameset></frameset> </i>, que le indican al navegador que divida la ventana en varias áreas: marcos.</p><p>Cuántas áreas de este tipo habrá y cómo se ubicarán depende de dos parámetros de la etiqueta <i><frameset></frameset> </i>: </p><ul><li><i>filas</i>- especifica dividir la ventana en áreas horizontales. Además, la cantidad de valores que tiene este parámetro, la cantidad de áreas. En nuestro ejemplo <i>filas="30%, 10%, 60%"</i>, es decir. tres áreas horizontales: el ancho de la primera es el 30% del ancho de la pantalla, el ancho de la segunda es el 10% y el tercero es el 60%.</li><li><i>columnas</i>- especifica dividir la ventana en áreas verticales.</li> </ul> Etiquetas interiores <i><frameset></frameset> </i> Se ubican etiquetas individuales. <i><frame> </i>, y debe haber tantos como áreas especificadas. Sin parámetros, estas etiquetas son inútiles. <p>Veremos los parámetros de la etiqueta. <i><frame> </i> con ejemplos.</p><p><img src='https://i1.wp.com/site-do.ru/images/html34.gif' width="100%" loading=lazy loading=lazy>Entonces miramos todos los parámetros de la etiqueta. <i><frame> </i>.</p><p>El toque final: quitar los marcos del marco. Para hacer esto en la etiqueta <i><frameset> </i> agreguemos dos parámetros <i>borde = "0" marco borde = "0"</i>. </p><p>marcos en html</p><br>Ahora nuestra página se ve así: <p><img src='https://i1.wp.com/site-do.ru/images/html41.gif' width="100%" loading=lazy loading=lazy></p><p> <i>Pros y contras de los marcos.</i> </p><p>Ahora que comprende los marcos, es hora de hablar sobre los pros y los contras de los sitios web enmarcados.</p><p>Una ventaja indudable es la reducción de la cantidad de información descargada en el ordenador del usuario. Después de todo, el encabezado y el menú del sitio se cargan solo una vez, y luego solo cambia el contenido. Por supuesto, esto reduce los tiempos de carga.</p><p>Pero hay muchas más deficiencias. En primer lugar, es fácil confundirse con la estructura de los fotogramas.</p><p>En segundo lugar, nuestro menú está en un archivo separado. Esto significa que si un usuario encuentra, por ejemplo, su página content.html a través de un motor de búsqueda, solo podrá leerla porque no hay enlaces ni elementos de menú en esta página.</p><p>Por último, no todos los navegadores admiten la estructura de marcos. Por lo tanto, las etiquetas existentes <i><noframes> , están ubicados dentro de las etiquetas y contener información alternativa para navegadores que no admiten marcos. Básicamente, tendrás que duplicar el trabajo y crear dos versiones del sitio: con y sin marcos.

De ahí la conclusión: no utilice marcos a menos que sea absolutamente necesario.

Ejemplos de estructuras de marco.

Como recordarás, dos parámetros se encargan de dividir en fotogramas: filas Y columnas. Al combinarlos, puedes dividir la ventana en marcos de cualquier forma. Consideraremos ejemplos de tal partición.

Ejemplo 1:

marcos en html


Obtenemos tres marcos verticales. El ancho del primero es de 150 píxeles, el segundo es de 300 y el tercero es el resto del espacio de la ventana.

Resultado:

Ejemplo 2:

marcos en html


Obtenemos dos marcos verticales. El ancho del primero se considera igual a uno, y el segundo se considera el doble de ancho que el primero (es decir, 33% y 67% del ancho de la ventana).

Resultado:

Ejemplo 3:

marcos en html


Obtenemos dos marcos horizontales. La altura del primero es de 100 píxeles y el segundo es el resto del espacio.
Dividiremos el segundo cuadro horizontal en dos verticales: uno tiene 200 píxeles de ancho y el segundo ocupará el resto del espacio. Esto se logra usando etiquetas anidadas. .