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.
MisiónA 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.
CierreMediante 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.
