Hola y Gracias por visitar mi Blog.
Comenzaremos explicando qué son las columnas, Frames y framework.
Columnas: En los documentos del lenguaje de marcado de hipertexto ( HTML ), las columnas son una forma de definir un área de un sitio web que generalmente tiene un ancho menor que el ancho total visualizable de una página.
Frames: Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se cargue una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos.
Frameworks: Un entorno de trabajo o marco de trabajo es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. Leer Más.
Estructura:
Podemos notar que el contenido mostrado serian (Cajas) que contienen los elementos deseados.
Tenemos como estructura base el etiquetado html que comienza con su etiqueta de apertura <html> y termina con su etiqueta de cierre </html>.
dentro de estas etiquetas está la etiqueta Head la cual contiene todo el contenido que irá en la parte de la cabeza.
encontramos la etiqueta meta, la cual puede contener diversos atributos. (Actualmente tiene el atributo Chartset, que refiere a la codificación de lenguaje a usar.
debajo encontramos la etiqueta Style, la cual nos sirve para introducir los estilos a otorgar para cada elemento.
claro las etiquetas head y style deben cerrarse para darle paso a la etiqueta body.
dentro de la etiqueta body tendremos todo el contenido principal que se deba mostrar en la web.
tenemos tres etiquetas div las cuales serán nuestros contenedores, cada una contiene una clase la cual hace referencia a los estilos otorgados en la sección de style.
Plus: si revisan el código está ajustado para ser responsivo.
Cómo funciona el código:
Para que las columnas sean ajustadas aún tamaño que les permita mostrarse en tres partes se utiliza el siguiente code:
.columna (Nombre de la clase)
float:left; (la propiedad float ubica un elemento al lado izquierdo o derecho de su contenedor. (Aqui le desimos que sea a la izquierda))
width:33%; ( La propiedad CSS width especifica la anchura del área de contenido de un elemento. (Aqui le desimos que sea de un 33% del ancho de su contenedor))
border:0px solid; (La propiedad border permite definir en una única regla todos los bordes de los elementos seleccionados. (Aquí le decimos que no tenga bordes y que sea sólido))
Pasaremos al código que nos ayuda a que sea responsivo.
@media (max-width: 780px)( Le especificamos que su tamaño máximo será de 780px, esto nos ayudará a que el contenido de tres columnas solo se muestre en pantallas mayores a 780px.
.columna (Nombre de la clase)
float:none; ( Le especificamos que no deberá flotar)
width:100%; (Se le especifica un ancho del 100% para lograr que en dispositivos con una resolución menor a 780px se muestren en forma de pila, una caja sobre la otra)
Código:
<!DOCTYPE html>
<html>
<head>
<style>
.columna
{float:left;
width:33%;
border:0px solid;
}
@media (max-width: 780px) {
.columna {float:none;width:100%;}
}
</style>
</head>
<body>
<div class="columna">Contenido 1</div>
<div class="columna">Contenido 2</div>
<div class="columna">Contenido 2</div>
Con estos pasos, se puede crear fácilmente tres columnas en HTML sin usar frames. Es importante tener en cuenta que, aunque los frames ya no son una práctica común en la construcción de sitios web modernos, existen otras opciones, como el uso de Flexbox o Grid, que pueden proporcionar aún más flexibilidad y control en la creación de diseños de varias columnas.
