¿Cómo dividir una página HTML en cuatro partes usando marcos?

En este artículo, aprenderemos cómo dividir una página en cuatro partes usando marcos HTML. Esto se puede usar para representar el encabezado, la barra lateral, el pie de página y el contenido principal. Los marcos se crean utilizando la etiqueta <frame>. Tendremos que utilizar cuatro archivos HTML para cada una de las porciones.

Sintaxis:

<frameset>
    // frame elements
</frameset>

El siguiente ejemplo demostrará el enfoque para crear las cuatro partes de la página.

index.html

<html>
<frameset rows="10%,80%,10%">
  <frame name="A" src="header.html">
    <frameset cols="80%,20%">
      <frame name="B" src="home.html">
        <frame name="C" src="sidebar.html">
    </frameset>
    <frame name="B" src="footer.html">
      <frameset rows="100%">
      </frameset>
</frameset>
</html>

Salida: La página ahora se dividirá así.

Ahora crearemos las páginas HTML de las cuatro secciones y el contenido de la página principal por separado.

header.html

<html>
<body>
  <h1 style="color: green; 
             text-align: center">
    GeeksforGeeks
  </h1>
</body>
</html>

home.html

<html>
<body>
  <h1 style="text-align: center">
    Welcome to the home page
  </h1>
</body>
</html>

sidebar.html

<html>
<body>
  <h3>Sidebar</h3>
  <a href="html_content.html" target="B">
    HTML
  </a><br>
  <a href="css_content.html" target="B">
    CSS
  </a><br>
  <a href="js_content.html" target="B">
    JS
  </a><br>
  <a href="php_content.html " target="B">
    PHP
  </a>
</body>
</html>

footer.html

<html>
<body>
  <h4 align="center">
    All Rights Reserved
  </h4>
</body>
</html>

html_content.html

<html>
<body>
  <p style="text-align: center">
    Hyper Text Markup Language
  </p>
  
</body>
</html>

css_content.html

<html>
<body>
  <p style="text-align: center">
    Cascading Style Sheets
  </p>
  
</body>
</html>

js_content.html

<html>
<body>
  <p style="text-align: center">
    JavaScript
  </p>
  
</body>
</html>

php_content.html

<html>
<body>
  <p style="text-align: center"> 
    Hypertext Preprocessor
  </p>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por krishnakarthikeyakhandrika y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA