Curso de HTML y CSS: formato del texto y los párrafos

Escrito por Adrián Crespo
HTML
8

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.

curso de html y css codigos hexadecimales colores

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.


Noticias relacionadas

Comentarios


8 comentarios
  1. fercol 27 Nov, 13 20:34

    No se si puedo preguntar dudas pero si quiero hacer que aparezca otro tipo de fuente más rara? Que tendría que hacer? Un saludo.

    Responder
    0
    1. AdrianCrespo 27 Nov, 13 20:41

      Si lo que te refieres es que pueda configurarse Comic Sans, Times new Roman, Arial, …. es modificando face=”fuente a elegir”, manteniendo las comillas, tal y como viene especificado en el código del curso.

      Responder
      0
      1. fercol 27 Nov, 13 21:09

        Por ejemplo en la web pordede.com utilizan texto en vez de imagen y utilizan una font que no viene x defecto y hay que descargarla (igual esto es nivel avanzado). Un saludo y gracias!

        Responder
        0
        1. AdrianCrespo 27 Nov, 13 21:40

          Inspeccionando el código del sitio web con chrome:

          img src=”/images/login/icon-play-white.png”
          img src=”/images/login/icon-download-white.png”>
          <img src="/images/login/icon-share-white.png"

          img src="/images/login/icon-play-white.png"
          img src="/images/login/icon-download-white.png"
          img src="/images/login/icon-share-white.png"

          Se puede ver que es una imagen con fondo transparente, por lo que es probable que esté hecho el logo con photoshop.

          Responder
          0
        2. AdrianCrespo 27 Nov, 13 21:45

          Según el código de la página se trata de una imagen con fondo transparente, por lo que es probable que haya sido realizado con algún software parecido a photoshop.

          Responder
          0
        3. pordede 15 Dic, 13 22:50

          http://www.google.com/fonts aquí tienes la respuesta de pordede.com, google te da la posibilidad de añadir fuentes personalizadas de manera muy sencilla. En realidad mediante otros sistemas podrías poner cualquier fuente (sí, cualquiera) pero para no liar demasiado, google webfonts es la solución. 2 clicks, añades un par de lineas a tu html y puedes poner nuevas fuentes.

          Saludos!
          pordede.com

          Responder
          0
    2. Sergio de Luz 27 Nov, 13 22:19

      Puedes preguntar lo que quieras 😀

      Responder
      0
  2. AdrianCrespo 27 Nov, 13 21:44

    Según el código de la página se trata de una imagen, por lo que es probable que ese logo esté hecho con algún programa tipo photoshop y se la haya dado un fondo transparente.

    Responder
    0