[2022] HTML: marcos {DHtrust.org}

Contenidos

1 Desventajas de los marcos

2 Crear marcos

3 Los atributos de etiqueta

4 Los atributos de etiqueta

5 Soporte del navegador para marcos

6 Nombre del marco y atributos de destino

Los marcos HTML se utilizan para dividir la ventana de su navegador en múltiples secciones donde cada sección puede cargar un documento HTML separado. Una colección de marcos en la ventana del navegador se conoce como conjunto de marcos. La ventana está dividida en marcos de manera similar a las tablas organizadas: en filas y columnas.

Desventajas de los marcos

Hay algunos inconvenientes con el uso de marcos, por lo que nunca se recomienda usar marcos en sus páginas web.

Algunos dispositivos más pequeños no pueden hacer frente a los marcos a menudo porque su pantalla no es lo suficientemente grande como para dividirla.
A veces, su página se mostrará de manera diferente en diferentes computadoras debido a la diferente resolución de pantalla.
El navegador espalda Es posible que el botón no funcione como espera el usuario.
Todavía hay pocos navegadores que no admitan la tecnología de marcos.

Crear marcos

Para usar marcos en una página, usamos la etiqueta

en lugar de la etiqueta . La etiqueta define cómo dividir la ventana en marcos. los filas El atributo de la etiqueta define los marcos horizontales y cols atributo define marcos verticales. Cada marco se indica con la etiqueta y define qué documento HTML se abrirá en el marco.

Nota – La etiqueta en desuso en HTML5. No utilice este elemento.

Ejemplo

A continuación se muestra el ejemplo para crear tres marcos horizontales:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "http://www.tutorialspoint.com/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Esto producirá el siguiente resultado:

Ejemplo

Pongamos el ejemplo anterior de la siguiente manera, aquí reemplazamos el atributo de las filas por cols y cambiamos su ancho. Esto creará los tres fotogramas verticalmente:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "http://www.tutorialspoint.com/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Esto producirá el siguiente resultado:

Los atributos de etiqueta

Los siguientes son atributos importantes de la etiqueta

No Señor	Atributo y descripción
1	cols Especifica cuántas columnas contiene el conjunto de marcos y el tamaño de cada columna. Puede especificar el ancho de cada columna de una de las cuatro formas siguientes: Valores absolutos en píxeles. Por ejemplo, para crear tres marcos verticales, use cols = «100, 500, 100». Un porcentaje de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = «10%, 80%, 10%». Usando un símbolo comodín. Por ejemplo, para crear tres marcos verticales, use cols = «10%, , 10%». En este caso, el comodín ocupa el resto de la ventana. Como anchos relativos de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = «3 , 2 , 1 ». Esta es una alternativa a los porcentajes. Puede utilizar anchos relativos de la ventana del navegador. Aquí la ventana se divide en sextos: la primera columna ocupa la mitad de la ventana, la segunda ocupa un tercio y la tercera ocupa un sexto.
2	filas Este atributo funciona igual que el atributo cols y toma los mismos valores, pero se usa para especificar las filas en el conjunto de marcos. Por ejemplo, para crear dos marcos horizontales, use filas = «10%, 90%». Puede especificar la altura de cada fila de la misma manera que se explicó anteriormente para las columnas.
3	frontera Este atributo especifica el ancho del borde de cada fotograma en píxeles. Por ejemplo, border = «5». Un valor de cero significa que no hay borde.
4	Frontera del marco Este atributo especifica si se debe mostrar un borde tridimensional entre los fotogramas. Este atributo toma el valor 1 (sí) o 0 (no). Por ejemplo, frameborder = «0» no especifica ningún borde.
5	espacio de fotogramas Este atributo especifica la cantidad de espacio entre cuadros en un conjunto de cuadros. Esto puede tomar cualquier valor entero. Por ejemplo, framespacing = «10» significa que debe haber un espaciado de 10 píxeles entre cada fotograma.

Los atributos de etiqueta

A continuación se muestran los atributos importantes de la etiqueta :

No Señor	Atributo y descripción
1	src Este atributo se utiliza para dar el nombre del archivo que debe cargarse en el marco. Su valor puede ser cualquier URL. Por ejemplo, src = «http://www.tutorialspoint.com/html/top_frame.htm» cargará un archivo HTML disponible en el directorio html.
2	nombre Este atributo le permite dar un nombre a un marco. Se utiliza para indicar en qué marco se debe cargar un documento. Esto es especialmente importante cuando desea crear enlaces en un marco que cargan páginas en otro marco, en cuyo caso el segundo marco necesita un nombre para identificarse como el destino del enlace.
3	Frontera del marco Este atributo especifica si se muestran o no los bordes de ese marco; anula el valor dado en el atributo frameborder en la etiqueta si se da uno, y esto puede tomar valores de 1 (sí) o 0 (no).
4	ancho de margen Este atributo le permite especificar el ancho del espacio entre la izquierda y la derecha de los bordes del marco y el contenido del marco. El valor se da en píxeles. Por ejemplo, marginwidth = «10».
5	altura de margen Este atributo le permite especificar la altura del espacio entre la parte superior e inferior de los bordes del marco y su contenido. El valor se da en píxeles. Por ejemplo, marginheight = «10».
6	no redimensionar De forma predeterminada, puede cambiar el tamaño de cualquier marco haciendo clic y arrastrando los bordes de un marco. El atributo noresize evita que un usuario pueda cambiar el tamaño del marco. Por ejemplo, noresize = «noresize».
7	desplazarse Este atributo controla la apariencia de las barras de desplazamiento que aparecen en el marco. Esto toma los valores «sí», «no» o «auto». Por ejemplo scrolling = «no» significa que no debería tener barras de desplazamiento.
8	longdesc Este atributo le permite proporcionar un enlace a otra página que contiene una descripción larga del contenido del marco. Por ejemplo, longdesc = «framedescription.htm»

Soporte del navegador para marcos

Si un usuario está utilizando un navegador antiguo o cualquier navegador que no admita marcos, el elemento

Por lo tanto, debe colocar un elemento

dentro del elemento porque se supone que el elemento <frameset> reemplaza al elemento , pero si un navegador no comprende el elemento <frameset>, entonces debería comprender qué hay dentro del elemento que está contenido en un elemento <noframes>. <div class="quads-location quads-ad63213 " id="quads-ad63213" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="quads-location quads-ad63214 " id="quads-ad63214" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>Puede poner un mensaje agradable para su usuario que tiene navegadores antiguos. Por ejemplo, <i>¡¡Perdón!! su navegador no admite marcos.</i> como se muestra en el ejemplo anterior.</p> <h2><span id="Nombre_del_marco_y_atributos_de_destino">Nombre del marco y atributos de destino</span></h2> <p>Uno de los usos más populares de los marcos es colocar barras de navegación en un marco y luego cargar las páginas principales en un marco separado.</p> <p>Veamos el siguiente ejemplo donde un archivo test.htm tiene el siguiente código:</p> <pre class="prettyprint notranslate"> <!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols = "200, *"> <frame src = "http://www.tutorialspoint.com/html/menu.htm" name = "menu_page" /> <frame src = "/html/main.htm" name = "main_page" /> <noframes> <body>Your browser does not support frames.</body> </noframes> </frameset> </html> </pre> <p>Aquí, hemos creado dos columnas para llenar con dos marcos. El primer marco tiene 200 píxeles de ancho y contendrá la barra de menú de navegación implementada por <b>menu.htm</b> expediente. La segunda columna llena el espacio restante y contendrá la parte principal de la página y está implementada por <b>main.htm</b> expediente. Para los tres enlaces disponibles en la barra de menú, hemos mencionado el marco de destino como <b>pagina principal</b>, por lo que cada vez que haga clic en cualquiera de los enlaces en la barra de menú, el enlace disponible se abrirá en la página principal.</p> <div class="quads-location quads-ad63213 " id="quads-ad63213" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="quads-location quads-ad63214 " id="quads-ad63214" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>A continuación se muestra el contenido del archivo menu.htm</p> <pre class="prettyprint notranslate"> <!DOCTYPE html> <html> <body bgcolor = "#4a7d49"> <a href = "http://www.google.com" target = "main_page">Google</a> <br /> <br /> <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a> <br /> <br /> <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a> </body> </html> </pre> <p>A continuación se muestra el contenido del archivo main.htm:</p> <pre class="prettyprint notranslate"> <!DOCTYPE html> <html> <body bgcolor = "#b5dcb3"> <h3>This is main page and content from any link will be displayed here.</h3> <p>So now click any link and see the result.</p> </body> </html> </pre> <p>Cuando cargamos <b>test.htm</b> archivo, produce el siguiente resultado:</p> <p><iframe loading="lazy" onload="resizeFrame(this)" class="result" src="about:blank" height="200px" width="660px" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.tutorialspoint.com/html/src/test.htm"></iframe><noscript><iframe onload="resizeFrame(this)" class="result" src="https://www.tutorialspoint.com/html/src/test.htm" height="200px" width="660px"></iframe></noscript></p> <div class="quads-location quads-ad63213 " id="quads-ad63213" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="quads-location quads-ad63214 " id="quads-ad63214" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>Ahora puede intentar hacer clic en los enlaces disponibles en el panel izquierdo y ver el resultado. los <i>atributo de destino</i> también puede tomar uno de los siguientes valores:</p> <table class="table table-bordered"> <tr> <th>No Señor</th> <th style="text-align:center;">Opción y descripción</th> </tr> <tr> <td style="text-align:center;vertical-align:middle">1</td> <td> <p><b>_uno mismo</b></p> <p>Carga la página en el marco actual.</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">2</td> <td> <p><b>_blanco</b></p> <div class="quads-location quads-ad63213 " id="quads-ad63213" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="quads-location quads-ad63214 " id="quads-ad63214" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>Carga una página en una nueva ventana del navegador. Abriendo una nueva ventana.</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">3</td> <td> <p><b>_padre</b></p> <p>Carga la página en la ventana principal, que en el caso de un único conjunto de marcos es la ventana principal del navegador.</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">4</td> <td> <p><b>_cima</b></p> <div class="quads-location quads-ad63213 " id="quads-ad63213" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="5894674251"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div class="quads-location quads-ad63214 " id="quads-ad63214" style="float:none;margin:0px 3px 3px 3px;padding:0px;"> <ins class="adsbygoogle" style="display:block;" data-ad-format="auto" data-ad-client="ca-pub-8560495594993334" data-ad-slot="7721270557"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <p>Carga la página en la ventana del navegador, reemplazando los marcos actuales.</p> </td> </tr> <tr> <td style="text-align:center;vertical-align:middle">5</td> <td> <p><b>marco de destino</b></p> <p>Carga la página en un marco de destino con nombre.</p> </td> </tr> </table>