13.4.10

Espacios en blanco y saltos de línea




Uno de los aspectos más interesantes del lenguaje HTML es el tratamiento especial de los "espacios en blanco" del texto, teniendo en cuenta que HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).

Veamos el siguiente ejemplo:

<p> Párrafo sin saltos de línea ni otro tipo de espaciado </p>

<p> Párrafo con saltos
de
línea
y    otro    tipo    de    espaciado </p>

El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:

Párrafo sin saltos de línea ni otro tipo de espaciado

Párrafo con saltos de línea y otro tipo de espaciado

Los espacios en blanco en ambos párrafos son idénticos y cada uno está en una sola línea, a pesar de que el segundo tiene, en el código HTML, varios espacios en blanco y está escrito en líneas diferentes. La razón para este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

Sin embargo, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.


Saltos de línea

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

Definición formal de la etiqueta <br>

<br> Nueva línea
Atributos comunes básicos
Atributos específicos -
Tipo de elemento En línea y etiqueta vacía
Descripción Fuerza al navegador a insertar una nueva línea

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. Su particularidad consiste en que es una etiqueta vacía, es decir, no encierra ningún texto. En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />).


Espacios en blanco

La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituír cada nuevo espacio en blanco por el siguiente texto:

&nbsp;

Volviendo al ejemplo anterior, utilizamos la etiqueta <br> para que se respeten las líneas que forman el segundo párrafo, y el texto &nbsp; (uno por espacio) para incluír espacios en blanco adicionales.

Entonces, para incluir los espacios en blanco adicionales y para que se respeten las líneas que forman el segundo párrafo, el código HTML del ejemplo se debe rehacer así :

<p> Párrafo sin saltos de línea ni otro tipo de espaciado </p>

<p> Párrafo con saltos </br>
de </br>
línea </br>
y &nbsp;&nbsp; otro &nbsp;&nbsp; tipo &nbsp;&nbsp; de &nbsp;&nbsp; espaciado <p>

Ahora el navegador sí nos mostrará correctamente los espacios en blanco y las nuevas líneas (saltos de línea) del segundo párrafo:


Párrafo sin saltos de línea ni otro tipo de espaciado

Párrafo con saltos
de
línea
y    otro    tipo    de    espaciado


Ejercicio No.2:

Determinar el código HTML que corresponde al siguiente documento:

Cambios en la temperatura de ciudades de EE.UU.,resultado del calentamiento global,(en grados Fahrenheit)

En el 2100, esta     Se sentirá como         Cambio de temp.
ciudad de EE.UU.     se siente hoy          entre 2008 y 2100

Anchorage, AK        New York, NY                 +18 
Minneapolis, MN      San Francisco, CA            +13  
Milwaukee, WI        Charlotte, NC                +13 
Albany, NY           Charlotte, NC                +13 
Boston, MA           Memphis, TN                  +12 
Detroit, MI          Memphis, TN                  +13 
Denver, CO           Memphis, TN                  +13
Chicago, IL          Los Angeles, CA              +14
Omaha, NE            Los Angeles, CA              +13
Columbus, OH         Las Vegas, NV                +13         
Solución aquí

 



Índice Formatear
Formato de párrafos HTML
Estructurar un texto
Marcado básico de texto
Texto preformateado
Espacios en blanco y saltos de línea
Marcado avanzado de texto
Marcado genérico de texto
Codificación de caracteres

8 comentarios :

▼▲ Mostrar / Ocultar comentarios

Publicar un comentario en la entrada