Html

Manual HTML: Cómo insertar espacios en blanco y saltos de línea

20 Febrero, 2016

Manual HTML: espacios en blanco y saltos de linea

Continuamos con nuestro manual de HTML, en esta ocasión veremos los espacios en blanco y los saltos de linea. en su día ya vimos como dar formato básico a un texto con HTML, hoy terminaremos de comentar con unos ejemplos.

HTML, “de forma automática”, no reconoce los espacios en blanco, ni los tabuladores ni los saltos de linea ya sean sencillos, dobles o cualquier otro tipo de salto de linea. de forma automática. HTML tiene su propio código para estos casos, veremos cuales son y en unos ejemplos explicaré como podremos hacer usu de estos códigos especiales.

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.

Agregar solamente un espacio

Inserta el código HTML   cuando quieras agregar un solo espacio (“nbsp” literalemtne 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?"

 

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

Ejemplo parrafo, salto de linea

Ejemplo parrafo, salto de linea. Fíjate en las comillas y el punto final

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í: &nbsp;&nbsp;&nbsp;&nbsp;

 &nbsp;&nbsp;&nbsp;&nbsp;

 

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.

Manual HTML: Ejemplo para simular un tabulador

Manual HTML: Ejemplo para simular un tabulador

Puedes ver el ejemplo de como simular un tabulador con HTML en este enlace.

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>

 

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.

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 pegalo 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.

 

También podría gustarte

Sin Comentarios

Dejar un Comentario