Cómo añadir pestañas y espaciado a las páginas HTML utilizando CSS

Cómo añadir pestañas y espaciado a las páginas HTML utilizando CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Si usted es un diseñador web principiante, una de las muchas cosas que tendrá que entender desde el principio es la forma en que el espacio en blanco en el código de un sitio es manejado por los navegadores web.

Desafortunadamente, la forma en que los navegadores manejan el espacio en blanco no es muy intuitiva al principio, especialmente si se entra en HTML y se compara con la forma en que se maneja el espacio en blanco en los programas de procesamiento de texto, con los que usted puede estar más familiarizado. En el software de procesamiento de texto, puede añadir muchos espacios o tabulaciones en el documento y ese espacio se reflejará en la visualización del contenido del documento. Este no es el caso de HTML o de las páginas web. Como tal, es muy importante aprender cómo el espacio en blanco es manejado por los navegadores web.

Índice de contenidos

Espacio en blanco en la impresión

En el software de procesamiento de texto, los tres caracteres de espacio en blanco principales son el espacio, la ficha y el retorno de carro. Cada uno de estos actos de una manera distinta, pero en HTML, los navegadores los hacen todos esencialmente iguales. Ya sea que coloque un espacio o 100 espacios en su marcado HTML o que mezcle su espaciado con tabulaciones y retornos de carro, todo esto se condensará en un espacio cuando el navegador muestre la página. En la terminología de diseño web, esto se conoce como colapso del espacio en blanco. No puede utilizar estas típicas teclas de espaciado para añadir espacios en blanco en una página web porque el navegador colapsa múltiples espacios en un solo espacio cuando se renderizan en el navegador,

¿Por qué se utilizan las pestañas?

Típicamente, cuando la gente usa pestañas en un documento de texto, las usa por razones de diseño o para hacer que el texto se mueva a un lugar determinado o para estar a una cierta distancia de otro elemento. En el diseño web, no se pueden utilizar los caracteres de espacio mencionados anteriormente para lograr esos estilos visuales o necesidades de diseño. En el diseño web, el uso de caracteres de espaciado extra en el código sería puramente para facilitar la lectura de ese código. Los diseñadores y desarrolladores web suelen utilizar pestañas para sangrar el código de modo que puedan ver qué elementos son hijos de otros elementos, pero esos sangrados no afectan al diseño visual de la página en sí. Para aquellos cambios necesarios en el diseño visual, tendrá que recurrir a CSS (hojas de estilo en cascada).

Uso de CSS para crear tabulaciones y espacios HTML

Los sitios web hoy en día se construyen con una separación de estructura y estilo. La estructura de una página es manejada por el HTML mientras que el estilo es dictado por el CSS. Esto significa que para crear espacios o lograr un diseño determinado, debe recurrir a CSS y no intentar simplemente añadir caracteres de espaciado al código HTML.

Si está intentando usar tabuladores para crear columnas de texto, puede utilizar en su lugar elementos que estén posicionados con CSS para obtener esa distribución de columnas. Este posicionamiento se puede realizar mediante flotadores CSS, posicionamiento absoluto y relativo, o mediante nuevas técnicas de diseño CSS como Flexbox o CSS Grid.

Si los datos que presenta son datos tabulares, puede utilizar tablas para alinearlos como desee. Las tablas a menudo tienen una mala reputación en el diseño web porque se abusó de ellas como herramientas de diseño puro durante muchos años, pero las tablas siguen siendo perfectamente válidas si su contenido contiene los datos tabulares antes mencionados.

Márgenes, relleno y Text-Indent

La forma más común de crear espacios con CSS es utilizando uno de los siguientes estilos de CSS:

  • margen
  • acolchado
  • sangría de texto

Por ejemplo, puede sangrar la primera línea de un párrafo como una pestaña con el siguiente CSS (tenga en cuenta que esto asume que su párrafo tiene un atributo de clase «first» adjunto):

 p.first {
sangría de texto: 5em;
}

Este párrafo tendría ahora unos cinco caracteres sangrados.

También puede utilizar las propiedades de margen o relleno en CSS para añadir espacio en la parte superior, inferior, izquierda o derecha (o combinaciones de esos lados) de un elemento. En última instancia, se puede lograr cualquier tipo de espaciado que se necesite recurriendo a CSS.

Mover texto más de un espacio sin CSS

Si lo único que desea es que su texto se aleje más de un espacio del elemento anterior, puede utilizar el espacio no divisible.

Para usar el espacio no rompible, simplemente añada

  tantas veces como lo necesite en su maquetación HTML.

Por ejemplo, si desea mover su palabra cinco espacios por encima, puede añadir lo siguiente antes de la palabra.

      

.

HTML las respeta y no las comprime en un solo espacio. Sin embargo, esto se considera una práctica muy pobre ya que está añadiendo marcas HTML adicionales a un documento sólo para satisfacer las necesidades de diseño. Refiriéndose de nuevo a esa separación de estructura y estilo, debería evitar añadir espacios no quebradizos simplemente para lograr el efecto de diseño deseado y debería utilizar en su lugar márgenes y relleno de CSS.

TAMBIÉN TE INTERESA

Nothing Phone (3)

Otra vez que nos deja en shock: se presenta el Nothing Phone (3)

Siempre causa mucha expectativa el lanzamiento de productos por parte de quien suele hacer las cosas diferentes. Y ese alguien en la industria de los smartphones es Nothing. Tecnonautas siempre ha seguido muy de cerca todo lo que ha salido de esta firma, simplemente por funcionar y por ser diferente al resto. Y ahora llega

Inteligencia Artificial Generativa y deporte

Inteligencia Artificial Generativa y deporte: una relación que va tomando forma…

El deporte, tradicionalmente anclado en la emoción del directo en la televisión en directo en los estadios, está entrando en una nueva era digital, profundamente influenciada por la inteligencia artificial (IA). Inteligencia Artificial Generativa y deporte están yendo de la mano y es la relación del momento para las generaciones jóvenes. Así lo concluye el

vivo X200 FE

Vivo X200 FE: fuera caretas con esta nueva gama alta

La marca vivo, siempre muy identificada con móviles accesibles, se quita la carea para presentar el nuevo vivo X200 FE, un dispositivo que busca conquistar a los usuarios que quieren rendimiento premium sin renunciar a la comodidad. Con una cámara desarrollada junto a ZEISS, batería de larga duración, una pantalla de alto nivel y un

videovigilancia camara AOV PT

La cámara AOV PT: un motivo para irse tranquilo de vacaciones

El verano es sinónimo de descanso, desconexión y viajes. Pero también de preocupación y seguro que las siglas de la cámara AOV PT ayudan a combatir ese sentimiento. Casas vacías, negocios con menos actividad y propiedades que quedan fuera del radar diario se convierten en un blanco fácil para robos o actos vandálicos. En este