Cursos de páginas web

Espacios en blanco

Curso de HTML

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  
59.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

En HTML, entendemos por un espacio en blanco a la típica separación que hay entre dos palabras:

espacio blanco

Lo curioso, es que cuando estamos maquetando con HTML, todo lo que va a continuación es interpretado por el navegador como un espacio en blanco:

  • Un espacio en blanco entre palabras (lógicamente…).
palabra palabra
  • Un salto de línea.
palabra 
palabra
  • Una tabulación.
palabra		palabra

Por muchos de los anteriores elementos anteriores consecutivos que pongamos, todos ellos serán interpretados por en el navegador por un único espacio en blanco. Esto ocurre así porque HTML ignora los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

palabra

		palabra

→

palabra palabra

Por supuesto, tenemos varias formas de incluir espacios en blanco y saltos de línea en nuestro documento:

Etiqueta <br/>

La etiqueta <br/> (break) será interpretada por el navegador web como un salto de línea.

palabra<br/>palabra

→

palabra
palabra

Una peculiaridad de la etiqueta
es que es una etiqueta vacía; no envuelve a ninguna otra etiqueta o texto. Por tanto, esta etiqueta debe abrirse y cerrarse de forma consecutiva <br></br>.

Cuando una etiqueta se abre y cierra sin contener nada dentro se puede abreviar escribiendo directamente (<br/>).

Introducir espacios en blanco en la visualización del navegador

Cuando queremos introducir una separación o espacio en blanco entre dos elementos de una página web, habitualmente lo correcto es recurrir a estilos CSS como márgenes, etc, que veremos más adelante en este mismo curso.

No obstante, aunque no sea muy habitual, existe la posibilidad de que querramos introducir una mayor separación entre dos palabras, y esto no se suele hacer utilizando márgenes, sino introduciendo espacios en blanco expresamente.

Podemos introducir espacios en blanco utilizando el código &nbsp; (non breaking space). Cada uno de estos códigos representa un espacio en blanco.

palabra&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;palabra

→

palabra      palabra

Texto preformateado

Es habitual utilizar la etiqueta de texto preformateado para mostrar código fuente.

Los saltos de línea y espacios en blanco ubicados dentro de la etiqueta <pre></pre> serán interpretados por el navegador en lugar de ser intercambiados por un único espacio en blanco, como ocurria cuando no usábamos esta etiqueta.

<pre>palabra

		palabra</pre>

→

palabra

		palabra

La etiqueta <pre> de HTML tiene las siguientes peculiaridades:

  • Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas líneas).
  • Muestra todas las letras de su interior utilizando un tipo de letra especial en el que todas las letras tienen la misma anchura.
  • Las líneas más largas que la etiqueta pre que las contiene provocan un scroll horizontal.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.