Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de línea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos de comentar con unos ejemplos, esto nos ayudará con el diseño web.
HTML, «de forma automática», no reconoce los espacios en blanco, ni los tabuladores ni los saltos de línea ya sean sencillos, dobles o cualquier otro tipo de salto de línea. de forma automática. HTML tiene su propio código para estos casos, veremos cuales son y en unos ejemplos explicaré como podremos hacer uso de estos códigos especiales.
Es muy importante una buena estructuración del texto para que sea legible, que pueda leerse con facilidad y aumentar la comprensión por parte de los lectores, nunca olvides trabajar la legibilidad de tus textos.
Los espacios que se crean normalmente con la barra espaciadora, la tecla «Tab» y «Enter» son ignorados al escribir en código HTML. HTML interpreta esos saltos como espacios en blanco, útiles para ayudar a organizar tu código, pero insignificantes para lo que quieres mostrar. Si quieres mostrar más de un espacio entre el texto, palabras, caracteres, puntuación, etc., deberás introducir un código entre ellos. Sigue leyendo para aprender una variedad de simples soluciones dependiendo de lo que requieras.
1. Agregar solamente un espacio
Inserta el código HTML cuando quieras agregar un solo espacio («nbsp» literalmente NON BREAKING SPACE, o lo que es lo mismo, un espacio en blanco que no se puede partir. ).
Usar es útil en situaciones donde solo se necesitan 1 o 2 espacios entre caracteres o palabras para darle un efecto más estilizado o presentable. Por ejemplo, si quieres que una parte de tu texto lleve 2 espacios después de un punto: «Hola. ¿Cómo estás?», tendrás que codificar ese espacio extra de la siguiente manera: «Hola. ¿Cómo estás?».
"Hola. ¿Cómo estás?"
2. Agregar un espacio entre párrafos usando HTML
Inserta <p> antes del texto que quieras dar formato de párrafo.
Inserta <p> al principio de cada párrafo.
Usa </p> para insertar espacios dentro de un párrafo. Por ejemplo: «Notó que la cerradura había sido violada y la tienda estaba muy desordenada.<p> Juan empezó a preocuparse y decidió llamar a la policía.</p>».
"Notó que la cerradura había sido violada y la tienda estaba muy desordenada.<p> Juan empezó a preocuparse y decidió llamar a la policía.</p>".
En esta imagen podemos ver como hay un salto de linea después de cerrar el párrafo, las comillas y el punto final saltan de línea. Desde este enlace puedes ver en tu navegador
3. Agregar espacios tabulados usando código HTML
Usa 4 o 5 espacios sin separación para agregar el mismo espacio que aparecería al pulsar «Tab».
El código luciría así:
No hay un código HTML para la tecla «Tab». Si necesitas usarlo para algo que vayas a mostrar, considera las opciones de formato que ofrece el código CSS.
Puedes ver el ejemplo de como simular un tabulador con HTML en este enlace.
4. Agregar saltos de línea usando HTML
Inserta <br> donde quieras mostrar un salto de línea.
Si vas a insertar 2 espacios usando este método, necesitarás agregar 2 saltos de línea: <br> <br> (uno para tener en cuenta que vas a mover la siguiente línea del texto y el otro para saltar un espacio).
<br> <br>
5. Mostrar el texto escrito usando HTML
Inserta <pre> antes del texto que quieras mostrar, o «preformatear». Mostrar el texto tal como está escrito o antes del formato significa que el espacio en blanco que normalmente no aparecería lo hará. Cada vez que introduzcas un espacio o «Enter» aparecerá en tu escrito como si fuera un procesador de palabras. El texto y la fuente tendrá un tamaño deferencia al del resto del texto de la página web donde se encuentre.
6. Consejos finales
- Siempre escribe tu código HTML en un editor de código o en un archivo de texto. Escribir tu código en un procesador de palabras normal puede causar errores, ya que los procesadores de palabras tienen sus propios códigos que le agregan al texto. Por ejemplo, prueba a escribir en Microsoft Word, copia el texto y pégalo en tu editor de HTML como Dreamweaver, verás la cantidad de código basura que se incluye. Esto hará que tu página ocupe mas espacio, será más pesada y tardará mas en cargar si aportar nada al usuario. Es solo basura inútil. Optimiza siempre.
- Cuando le des formato a los párrafos, ten presente que el espacio entre cada párrafo está determinado por el código CSS.
- Si encuentras símbolos extra en tu documento, revisa que no haya ningún código sin cerrar, como un <br en lugar de <br>.
- Si tienes un diseño web, página web que está más relacionado con el diseño del sitio, considera trabajar con el código CSS.
- Ten presente que el texto preformateado tendrá una fuente y un tamaño diferente al texto regular.
- Y con último consejo, ten a mano un manual sobre HTML, esto te ayudará mucho. Otra opción es realizar un master en programación en Assembler School con casos del mundo real.
