Crea tu web, tutor html, css

Como usar el texto en las páginas web

Leer en una pantalla de ordenador no es demasiado cómodo y dicen que no es recomendable para nuestros ojos. ¿Entonces si necesitamos poner un texto largo que hacemos?

Procura repartirlo en páginas con cierta coherencia. El periódico te servirá de ejemplo, los temas están agrupados por secciones: deportes, espectáculos, actualidad ... En la web las secciones podrían ser páginas o grupos de páginas.

  • Procura dividir el texto en la página con elementos que rompan la continuidad, como simples líneas o pequeños gráficos que tengan relación con lo escrito.
  • Como guía básica utiliza párrafos cortos donde destaque claramente la idea que quieres transmitir.
  • Evita párrafos muy anchos, ocupando toda la página en dispositivos de pantalla grande. Divídelos en columnas.
  • Cuida mucho la ortografía, una página con faltas de ortografía produce rechazo y la confianza del usuario baja.
  • No mezcles demasiados tipos de letra (fonts-family). Como mucho usa dos, una para titulares y otra para contenidos.
  • Usa adecuadamente los modificadores como cursiva, negrita o versalita (todo mayúsculas pequeñas) para dar énfasis o destacar partes del texto.
  • Si necesitas poner mucho texto plantéate crear un archivo PDF, que puede ser leído directamente desde el navegador o descargado por el usuario.

Los elementos que forman el texto de la página pueden organizarse usando bloques  (como div, flex, grid). Con ellos se puede evitar tener que usar solo párrafos contínuos tipo libro. Son elementos que permiten maquetar las páginas, no solo para texto, sino también para otros elementos.

El texto en las páginas web

Las fuentes de caracteres

El texto de la página web puede escribirse usando diferentes tipografías, distintas fonts-family. Existe una enorma variedad de tipos de caracteres, más o menos adecuados para diferentes contestos: lectura, titulares, textos destacados incluso para representar imágnes (los iconos).

Pero dentro de esta abundancia se distinguen dos grandes famillia: las seriff y las sans-serif. Las primeras son como más uniformes y las segundas presentan las letras acabadas en un apéndice (seriff). Existen fuents que están comparten propiedades de ambos tipos, como muchas que imitan la escritura manual (handwriting).

Diferencia seriff y sans-seriff
en general los tipos de letras se usan para eso: letras y números, pero existen tipos que se utlizan para representar iconos, esas pequeñas imágnes usadas como señales informativas. Realmente son caracteres y se pueden utilizar en la página en la misma manera que caracteres de texto incluso se les puede dar color o cambiarles el tamaño.
Diferencia seriff y sans-seriff

Otra característica a tener en cuenta en las fuentes tipográficas es el espacio entre caracteres, asi existen fuentes en las que el espaciado se adapta al tamaño de cada carácter: una i ocupa menos que una m. Mientras que otras usan un espaciado fijo (las monospace). son tipos de letra que simulan los textos de las máquinas de escribir o de los primeros terminales de ordenadores. Un tipo muy popular entre estas es la fuente Courier New.

En una página web no se deben mezclar demasiados tipos de letras. Para lectura los sans-serif son más cómodos.

Tablas y texto

Hasta la llegada del HTML5 las tablas eran quizás el mejor método para ordenar el texto, y otros elementos, en una página web. Una tabla básicamente es una colección de celdas organizadas en filas y columnas, pero esta organización tan cuadriculada puede romperse combinando varias celdas en una sola o dividiento una celda en varias filas o columnas. Esto convierte a la tabla en un elemento tremendamente versátil para repartir texto, e imágenes, en la página.

En los ejemplos siguientes tienes algunas tablas modificadas en este sentido, les pongo bordes para que veas como se han combinado o dividido las celdas.

   
   
 
     
 
   
 
   
   

Pero este no es cometido de las tablas realmente: Las tablas están para mostrar listados de datos. Y la norma de HTML5 sigue ese criterio y reserva para las tablas mostrar datos, como listas de precios, catálogos...

No es que no puedan usarse como se hacía en HTML4 es perfectamente posible, pero la filosofía del nuevo lenguaje de marcas procura dar a cada elemento de la página un uso determinada (elementos nav para barras de navegación, section para apartados, tablas para datos, etc).

Además existe un problema con las tablas: no son responsive. La estructura tabla conlleva que sea realmente complicado aus adaptación al tamaño de pantalla. Si hay cuatro columnas son cuatro, no pueden reducirse en pantallas pequeñas. Considera esto cuando vayas a usarlas

Las tablas están pensadas en HTML5 para el uso natural de presentar datos, no para maquetar la página web.

Las tablas son difíciles de incorporar a diseños responsive debido a su estructura rígida de filas y columnas.

Bloques DIV para organizar.

Es otra alternativa para repartir los componentes de la página. Son los muy versátiles elementos DIV (y otros similares pero específicos como section, main, nav) con posicionamiento absoluto, relativo, enlinea

Son cajas o bloques con contendio que podemos colocar en el lugar de la página que queramos (incluso fuera de ella). Es un elemento importante para organizar el texto en la página.

No son un elemento nuevo, su antecedente se encuentra en las layer del antiguo Netscape. No obstane su uso ha cambiado bastante, no solo el nombre, DIV.

Pueden tener cualquier tamaño y no solo sirven para organizar el texto, pueden contener cualquier componente HTML:  tablas, imágenes, formularios, otras capas (DIV)...

Estas capas o bloques son también muy útiles para crear animaciones en las páginas o para crear páginas con contenidos a varios niveles (como si tuvieras varias páginas en un mismo sitio, unas sobre otras).

Por ejemplo si pulsas en este enlace verás que ocurre. En el lenguaje de marcas actual, HTML 5,las DIV y sus variantes son recomendadas en lugar de usar tablas. Además otra gran ventaja es que estos elementos DIV puede reordenarse o redimensionarse en función del tamaño de la pantalla. Son vitales para el diseño adaptativo o en ingles: responsive.

Pese a su versatilidad es muy fácil acabar con un interminable número de bloques div anidados que pueden dificultar las tareas de mantenimiento de las páginas. Hay qeu cuidar esto y usar si es posible otros bloques con las mismas opcinoes peor con significado semátncio para HTML5 como pueden ser section o article y toros.

Los bloques DIV son bloques genéricos para HTML5. Cuando sea posible es mejro usar bloques semántcos como section, article, main, header

Los estilos CSS

Ya en HTML4 se presentan las página web con una división clara entre el contenido y el aspecto, la forma de presentarlo. El actual HTML5 lleva esa separación al extremo y para logararlo utiliza los estilos CSS3.

En esa linea define los elementos HTML en función de la finalidad de su contenido. Por ejemplo: hay un elemento llamado  <nav> se entiende que se usa para contener un menú de navegación. A esto se llama contenido semántico.

Por esto cualquier página web actual viene acompañada de una buena colección de definiciones de estilos CSS: un conjunto de reglas que dicen como mostar el contenido de la página. Se pueden definir entre otros atributos los colores, tamaños y tipos de letras, posiciones de los bloques DIV, etc.

Asi, con las reglas CSS puedes hacer invisible un elemento DIV, o definir su tamaño, si tiene bordes o no, y como se deben mostrar: como una tabla, como filas o como celdas, o como bloques, o bloques en linea....Toda una variedad a elegir.

El nuevo HTML5 no olvida el uso de las tablas para organizar contenido, solo lo actualiza con un tipo de bloques denominado grid que imita y enriquece a la estructura tabla. En CSS un bloque grid define columnas y filas, pero además permite fundirlas o dividirlas (como se hace en las tablas) pero de manera dinámica. Con lo que facilita mucho el trabajo al diseñar páginas responsive (el diseño adaptativo), porque permite redefinir una estructura tipo tabla al modificar el tamaño de la pantalla donde se ve nuestra página web. algo que no permite la estructura table. Este es un ejemplo de tabla elaborada con la regla grid

Grid CSS3
celda
celda
celda
celda
celda
celda

CSS también provee la disposición de bloques tipo flex, que no es más que una manera de mostrar un bloque grande (contenedor) con bloques hijos alineados en su interior. Es también una manera de crear una estructura tipo tabla o de maquetar en suma el texto en la página. Los bloques hijo se reparten dentro de un bloque padre en horizontal y/o en vertical. Sigue siendo una estructura dinámica y por tanto muy aplicable en diseño responsive. Este es un ejemplo de bloques perfectamente alineados en un contenedor de tipo flex, si lo ves en una pantalla grandes verás 4 columnas y en una de móvil verás 3 columnas (se consigue solo con estilos)

caja 1
caja 2
caja 3
caja 4
caja 5
caja 6
caja 7
caja 8
caja 9
caja 10
caja 11
caja 12
Un uso adecuado de las relas de estilo permite un diseño adaptativo y cambios radicales a todo el sitio sin tocar el código de las páginas