A fin de describir con excelencia la forma de interpretación y visualización de estilos por el navegador web, identificaremos el funcionamiento de cajas en el lenguaje CSS, según sus reglas oficiales. La definición de estilos resulta complicada cuando se desconoce el modelo de cajas, el cual constituye la forma de representación de todos los elementos. Para contribuir con la definición de estilos, evaluaremos los tipos de presentación de cajas y los beneficios aportados en la creación de páginas web.

Al definir una ilustración dentro del elemento de imagen cuando creamos una página web, la imaginamos como se mostraría en la pantalla del usuario. Sin embargo, el navegador web la entiende de modo diferente; en este caso, la interpreta y muestra como una caja.

El modelo de cajas es un tema importante para manejarlo en su totalidad, pues en él se basan las etiquetas de HTML y los diseños del lenguaje CSS. Un ejemplo, para entenderlo con facilidad, lo tenemos al momento de crear una página web. Allí, cuando deseamos mostrar un párrafo, lo interpretamos exactamente como es, mas el navegador interpreta una caja, la cual debe enseñar al usuario. Por lo tanto, es necesario tener presente este concepto en la creación de páginas web.

061-01_0607_ilu01. Especificación de caja

Al ubicar el estándar oficial de HTML, verificamos la existencia de etiquetas en línea y etiquetas de bloque. Esta clasificación es susceptible a tomar cuenta cuando se trata de crear páginas web, pues de ello dependen las cajas en CSS; por lo tanto:

• Al utilizar una etiqueta de bloque, se muestra como una caja, y cuando existe otro elemento de bloque, ambos se muestran uno debajo del otro y forman dos cajas invisibles al usuario.
• Al utilizar una etiqueta en línea, se muestra dentro del elemento de bloque donde se ha especificado, y si existe otro elemento de la misma clasificación a un lado, se muestran juntos en la misma línea.

061-01_0607_ilu02. Etiquetas de bloque y en línea de HTML

Existen diferentes ventajas de cajas en CSS, entre ellas:

• Espacio optimizado: debido a la posibilidad de agregar los estilos deseados y, así, mostrar la información exacta en la pantalla, sin dejar espacios en blanco.
• Creación de columnas: debido a la posibilidad de dividir la presentación en el número de columnas deseadas mediante etiquetas de CSS, por la facilidad de formar cajas verticales.
• Creación de barras: debido a la posibilidad de crearlas de forma horizontal, con la finalidad de dividir correctamente la información.

061-01_0607_ilu03. Mapa de beneficios de cajas CSS

Las cajas de CSS toman como referencia las etiquetas de HTML. Sin embargo, es posible crearlas mediante  declaraciones de estilo en el documento CSS.

Keynotes

• Cuando creamos una página web, al definir una ilustración dentro del elemento de imagen, la imaginamos como se mostraría en la pantalla del usuario. Sin embargo, el navegador la entiende de modo diferente; en este caso, la interpreta y muestra como una caja.
• El modelo de cajas es un tema importante para manejarlo en su totalidad, pues en él se basan las etiquetas de HTML y los diseños del lenguaje CSS.
• Al ubicar el estándar oficial de HTML, verificamos la existencia de etiquetas en línea y etiquetas de bloque. Esta clasificación es susceptible a tomar en cuenta cuando se trata de crear páginas web, pues de ello dependen las cajas en CSS.
• Al utilizar una etiqueta de bloque, se muestra como una caja, y cuando existe otro elemento de bloque, ambos se muestran uno debajo del otro, formando dos cajas invisibles al usuario.
• A Al utilizar una etiqueta en línea, se muestra dentro del elemento de bloque donde se ha especificado, y si existe otro elemento de la misma clasificación a un lado, se muestran juntos en la misma línea.
• Las cajas de CSS toman como referencia las etiquetas de HTML. Sin embargo, es posible crearlas mediante  declaraciones de estilo en el documento CSS.

A fin de describir con excelencia la forma de interpretación y visualización de estilos, prepara un borrador para explicar la identificación del funcionamiento de cajas en el lenguaje CSS, según las reglas de este lenguaje.

Pasos a seguir:

• Ubica el estándar oficial de CSS, y lee las especificaciones del funcionamiento de cajas.
• Agrega los nuevos conocimientos en tu resumen.
• Ubica a un especialista de la materia y léele tu resumen, a fin de anotar sus sugerencias.

Sabrás que has tenido éxito cuando leas tu resumen a un compañero de estudio y entienda perfectamente la explicación.

Realiza las modificaciones necesarias luego de tu presentación, y comparte el resultado final del resumen en tu vBox. Invita a dos compañeros a comentar tu publicación y debate con ellos los puntos de vista de cada uno.

Tiempo disponible: 3 horas.

Mediante la identificación del funcionamiento de cajas en el lenguaje CSS, definimos estilos con facilidad, y describimos con excelencia la forma de interpretación y visualización de las mismas por partes del navegador web. Con paciencia y disciplina, dominaremos eficientemente el modelo de cajas CSS.