Cómo tabular un texto en HTML

Escrito por steve sweeney-turner | Traducido por mayra nava
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo tabular un texto en HTML
Puedes hacer esto en HTML. (text of the bible image by Alexey Klementiev from Fotolia.com)

Los teclados de las computadoras tienen teclas "tabuladoras" que son útiles para poner sangría a un texto. Sin embargo, estas sangrías tabuladas normalmente no se muestran en las páginas web escritas en HTML. Esto puede ser un problema si tu página web tiene contenido que necesite sangría, como la poesía y el código informático. La solución más sencilla es "tabular" texto en HTML utilizando las hojas de estilo en cascada (CSS, por sus siglas en inglés). Esto te permite crear reglas de formato personalizadas para tantos tamaños de tabulador como sea necesario.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre tu archivo HTMLA en el editor de texto y agrega el siguiente código CSS en la sección de "encabezado" de tu HTML:

    <style type="text/css"> <!-- span.tab1 {padding-left: 1.3em;} span.tab2 {padding-left: 2.6em;} --> </style>

    La primer regla de estilo define una clase de "espacio" con un "relleno" (padding) izquierdo relativo de 1,3. La segunda regla define otra clase de "espacio" (padding) con el doble de cantidad de "relleno". Guarda el archivo como "taba.html".

  2. 2

    En tu contenido, solicita la tabulación que deseas justo antes del contenido. Por ejemplo:

    <p>There was a keen reader of eHow <br/><span class="tab1"></span>Who wanted to know how to tab; <br/>The answer was really quite simple, <br/><span class="tab2"></span>When style sheets made layouts just fab!</p>

    La segunda y cuarta línea empieza con elementos de "espacio" vacíos con tamaños de tabulador virtuales definidos por los valores de "relleno" en tus reglas CSS. Guarda de nuevo el archivo.

  3. 3

    Prueba tu página web. Abre tu navegador y carga "tabs.html". Deberías poder ver dos tamaños de "tabulador" diferentes en las líneas segunda y cuarta del poema. Si no es así, revisa que hayas copiado los códigos del ejemplo correctamente.

  4. 4

    Sigue agregando tabuladores EN Donde quieras utilizando elementos de espacio con atributos de clase y valores para definir cada tipo de tabulador. Ajusta los valores de relleno del CSS para adaptarlo a tu diseño propio. Crea más reglas de estilo para cuantos tamaños de tabulador necesites.

Consejos y advertencias

  • También puedes usar un "pre" elemento HTML para dar formato a un código informático. Esto obliga a la mayoría de los navegadores a mostrar cada espacio literal, salto de línea y tabulador que escribas en las etiquetas "". Sin embargo, los distintos navegadores pueden mostrar el ancho del tabulador de forma distinta. Incluso aquí, utilizar elementos de "espacio" en HTML con sus valores de "relleno" definidos en el CSS te proporciona más control sobre tus diseños.
  • Si utilizas elementos "pre" HTML para dar formato a un código informático, sé muy cuidadoso en cómo codificas cada carácter. Escribir los caracteres de etiqueta "" hace que los navegadores traten su contenido como elementos HTML normales, que se ejecutan como códigos invisibles. Para hacer que los navegadores los muestren como texto visible, codifica los caracteres "" como "" y "" (sin espacios).

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles