Continuando con el curso de HTML y CSS hoy hablaremos sobre todo lo relacionado con el texto y cómo se puede formatear este. Además, entraremos un poco más en profundidad y hablaremos también sobre la creación de párrafos de texto, algo muy importante en el diseño de las páginas web.
Y es que ¿qué página web no posee ningún parrafo en algunas de las páginas que la conforman? Prácticamente todas posee algún párrafo que está acompañado de otros elementos, como imágenes, formularios, … Para crear un párrafo en HTML deberemos utilizar las etiquetas <p> </p> para abrir y cerrar respectivamente. La simple inclusión de la etiqueta provoca se produzca una separación entre párrafos distintos. Por lo tanto, esto traducido en código quedaría así:
<p>Esto es un párrafo</p>
Si lo que queremos es crear un párrafo con líneas de cierta longitud, y que no dependa de HTML, es recomendable utilizar la etiqueta <br>, por ejemplo:
<p>Esto es la primera línea de un párrafo<br>y esta es la segunda</p>
Como habréis podido observar he puesto todo seguido en lugar de saltar de línea después del <br>. Se puede hacer de ambas formas porque hay que tener en cuenta que el navegador interpreta las etiquetas.
Estaréis pensando que cómo se puede ver esto de una forma más clara. Crear un fichero .html y pegar en él el código que os ponemos a continuación:
<html>
<head>
<title>Ejemplo de párrafos</title>
</head>
<body>
<p >Párrafo de ejemplo</p>
<p>Otro párrafo de ejemplo y <br> distinto del anterior</p>
</body>
</html>
Nota: Además de las etiquetas <br> se puede utilizar las teclas para poner palabras en negrita, cursiva o subrayado(<b></b>, <i></i>, <u></u>, respectivamente).
Y ahora estaréis pensando que la ubicación del texto no os gusta y que queréis otra, para eso la etiqueta párrafo dispone de un parámetro gracias al cual se puede modificar la alineación (align). Un ejemplo:
<p align=»center»>Esto es un párrafo que está centrado</p>
Como ya habéis podido deducir, si no se indica nada con respecto a align, las posición natural del texto es la más a la izquierda como sea posible.
Vamos a poner un ejemplo donde se vea bien, al igual que antes podéis coger y copiar el texto en un fihero para después poder visualizar el resultado con el navegador:
<html>
<head>
<title>Ejemplo de párrafos</title>
</head>
<body>
<p >Párrafo a la izquierda</p>
<p align=»left»>Párrafo a la derecha</p>
<p align=»center»>Otro párrafo de ejemplo pero al centro</p>
</body>
</html>
Formato del texto de los párrafos
Una vez que ya hemos aprendido a crear y alinear párrafos, podemos continuar jugando con los argumentos que se le puede dar a este para dar cierto formato al texto.
De momento vamos a ver que se puede modificar el texto incorporando a los párrafos la etiqueta <font></font>. Más adelante, cuando empecemos con CSS veremos que esto se puede hacer utilizando hojas de estilos para así simplificar la programación.
Para ver cómo se utiliza esta etiqueta que mejor que hacer uso de un ejemplo:
<p><font face=»Arial»>Párrafo con letra arial</font></p>
Como habéis observado es dentro de la etiqueta <font> donde se aplican los formatos que queremos que nuestro texto posea.
Otro ejemplo, en este caso modificando el color del texto:
<p><font color=»red»>Párrafo con letra de color rojo</font></p>
Existen una serie de colores que están definidos en HTML, pero para otros muchos que son más personalizados será necesario utilizar el código hexadecimal que alguna vez es probable que hayamos visto. Por ejemplo, el código del color blanco es #FFFFFF mientras que el del negro es sustituir las F por ceros. En internet se encuentran michos sitios donde te proporcionan un a tabla con el código hexadecimal a utilizar para cada color.
Aquí os dejamos con uno para que podáis ver y jugar un poco. Hay que añadir la almohadilla al comienzo.
Vamos a utilizar también el modificador de tamaño:
<p><font size=»5″>Párrafo de tamaño 5</font></p>
Y si lo que estáis pensando es si todas estas modificaciones se pueden hacer en una sola línea y en un solo párrafo a la vez, la respuesta es si:
<p><font face=»Arial» color=»red» size=»5″>Ejemplo de las tres modificaciones</font></p>
Hasta aquí hemos llegado en esta entrega. Os emplazamos la próxima semana para comenzar con las imágenes: la insercción de imágenes como fondo y en la página como acompañante de los párrafos. No te olvides de consultar nuestro índice de entregas si te has perdido alguna.