Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Html

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

Veremos como insertar espacios en blando, tabuladores y saltos de linea simples con HTML

20 febrero, 2016
en Html
0
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)
Share on FacebookShare on Twitter

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.

Resumen del Contenido

  • 1. Agregar solamente un espacio
  • 2. Agregar un espacio entre párrafos usando HTML
  • 3. Agregar espacios tabulados usando código HTML
  • 4. Agregar saltos de línea usando HTML
  • 5. Mostrar el texto escrito usando HTML
  • 6. Consejos finales

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

Ejemplo parrafo, salto de linea
Ejemplo párrafo, salto de línea. Fíjate en las comillas y el punto final

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í: &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.

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.

 

Etiquetas: espacios en blancomanual htmlsaltos de linea
ANUNCIO
Post anterior

Plantillas para magento, pon tu tienda online a la moda

Próximo Post

Los 3 errores mas comunes en #WordPress y como solucionarlos

Otros Posts

Web semantica con HTML5

Enlace para llamar por teléfono HTML5

13 marzo, 2016
1

¿Sabes marcar un número de teléfono desde un enlace? Te decimos como hacerlo con una etiqueta HTML5

Web semantica con HTML5

Web semantica con HTML5

11 febrero, 2016
0

HTML5 introduce  etiquetas semánticas, que no aportan ningún comportamiento visual adicional, pero que nos permiten por un lado definir de forma semántica el significado de su contenido, lo que será muy útil para el SEO...

Recomendados

Copos de nieve vectorizados

Copos de nieve vectorizados

14 febrero, 2012
Html: color, tamaño y tipo de letra

Diseño web: usuarios, contenidos y experiencias

2 diciembre, 2010
Tutorial crear efecto metálico en un botón

Eliminar Ojos Rojos

24 enero, 2011
¿Como puedo modificar el fichero host?

¿Como puedo modificar el fichero host?

10 octubre, 2017

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .