Ya hemos visto en el ejemplo anterior cómo escribir texto en una página, basta con escribirlo dentro de las etiquetas <body>. Sin embargo el HTML tiene una peculiaridad, no muestra el texto tal y como lo escribimos. Para comprobarlo veamos un ejemplo:
<html> <head> <title>Tu primera página</title> </head> <body> Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es una cosa muy fácil. </body> </html>
Es lógico pensar que la página tendrá este aspecto:
Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es muy fácil.
Sin embargo este es el aspecto real: ejemplo2.html
Como ves nos escribe todas las líneas seguidas, no pone saltos de línea. Tenemos que ponerlos nosotros. La forma de saltar a la línea siguiente es usando la etiqueta <br>. Esta es una de las pocas etiquetas que no tiene pareja, no existe una etiqueta </br>.
<html> <head> <title>Tu primera página</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera página web.<br> HTML es una cosa muy fácil.<br> </body> </html>
Comprueba cómo efectivamente ahora funciona: ejemplo3.html
Podemos poner todos los saltos que queramos entre líneas, cada <br> hace que saltemos a la línea siguiente.
Vamos a hacer una segunda prueba, creamos una página con un montón de espacios entre algunas palabras:
<html> <head> <title>Tu primera página</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> Esta es mi primera página web.<br> HTML es una cosa muy fácil.<br> </body> </html>
Seguramente esperarás que tenga este aspecto:
Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es una cosa muy fácil.
Pero no es así, los espacios adicionales se eliminan y tan sólo se deja un espacio entre dos palabras. Compruébalo en este ejemplo: ejemplo4.html.
Entonces ¿cómo metemos espacios adicionales? Existen en HTML lo que se llaman códigos, cada código representa una letra o un carácter. Por ejemplo el código del espacio en blanco es (Non Breaking SPace). Si escribimos obtendremos un espacio adicional:
<html> <head> <title>Tu primera página</title> </head> <body> Hola, me llamo PON TU NOMBRE.<br> </body> </html>
Compruébalo aquí: ejemplo5.html
Existe una forma de mostrar el texto con saltos de línea y espacios sin tener que usar <br> y . Es el texto preformateado. Cuando ponemos texto en una página el navegador lo formatea, le quita los saltos de línea y los espacios adicionales. Podemos indicarle que no haga esto usando las etiquetas <pre> y </pre>. Cuando rodeamos un texto con estas etiquetas queda preformateado, es decir, queda tal cual:
<html> <head> <title>Tu primera página</title> </head> <body> <pre> Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es una cosa muy fácil. </pre> </body> </html>
Este texto queda:
Hola, me llamo PON TU NOMBRE. Esta es mi primera página web. HTML es una cosa muy fácil.
Una forma más ordenada de introducir el texto es utilizando <p> y <p>. Todo lo que va entre estas dos etiquetas es un párrafo. Probablemente verás muchas páginas que utilizan sólo la primera etiqueta (<p>), esto es válido pero se recomienda usar ambas.
La forma correcta de usar lo párrafos es colocando <p> al principio del párrafo y </p> al final.