Párrafos y bloques

Cuando construimos una página web debemos agrupar el texto en párrafos o bloques. Así cada vez que comience un nuevo párrafo, el navegador insertará una línea en blanco para separar un bloque de otro.  Para ello utilizaremos la etiqueta <p> que indica el comienzo del párrafo y </p> que indica el final del párrafo.

Cada vez que añadimos un nuevo párrafo produce un salto de línea similar al que se hace con la etiqueta <br> solo que la separación es mucho mayor (podemos decir que equivale a un <br> y medio; más adelante veremos como cambiar esa distancia).

Si omitimos el tag final del párrafo, HTML considera que termina el párrafo cuando encuentra otra etiqueta de principio de un párrafo <p>.

Alineaciones

Las etiquetas <p> … </p>tienen además otras opciones que permiten mostrar como tiene que mostrarse en nuestro navegador. Podemos establecer, por ejemplo, que la alineación del párrafo sea a la izquierda (por defecto si no ponemos nada), a la derecha o al centro.

Para programar la alineación utilizamos el siguiente modo:

Donde alineación es uno de los siguientes valores:

Vemos un listado de ejemplo:

Vemos el resultado en nuestro navegador:

Además de la etiqueta <p align=center>, para centrar un texto, podemos centrarlo también con las etiquetas <center>...</center>, del siguiente modo:

Y el resultado sería:

Hemos introducido la etiqueta <center> dentro de la etiqueta <p>, también podemos colocar la etiqueta <center> sin que dependa de la etiqueta <p>; por ejemplo:

Interpretado por el navegador:

Estilo del texto

Podemos poner un estilo a nuestro texto, por ejemplo, palabras en negrita, cursiva y subrayado. Podemos utilizar estas etiquetas conjuntamente, para, por ejemplo, poner texto en negrita y cursiva al mismo tiempo. En este caso, debemos ir cerrando las etiquetas en el orden inverso a como se fueron abriendo.

Veamos un ejemplo más conciso y comprensible de estas etiquetas:

Nuestro navegador lo interpreta:

Tambien podemos aplicar varios estilos en una palabra o frase:

Visto desde el navegador:

Otras etiquetas de resaltado

Además de las etiquetas vistas anteriormente, existen dos más para resaltar el texto de la página:

  • <strong>...</strong>.- Muestra el texto seleccionado más resaltado. Casi todos los navegadores lo muestran de forma idéntica a <b>...</b>.
  • <em>...</em> .- Muestra el texto delimitado con énfasis. Casi todos los navegadores lo muestran de forma idéntica a <i>...</i>.

Un ejemplo:

Visto desde nuestro navegador:

  • Ensaya con los tipos de resaltado.

Tamaño del texto

HTML nos permite mostrar el texto con el tamaño que desee. Para ello usamos las etiquetas <font size = t> ... </font>, siendo t el tamaño del texto. El tamaño del texto debe comprender entre el 1 (tamaño más pequeño) y 7 (tamaño máximo). Por defecto el valor es 3.

Por ejemplo:

Lo veríamos así:

Podríamos hacer una entrada de cuento de hadas…

  • Haz un listado que muestre en tu navegador la imagen de arriba.
  • Ensaya con los distintos tamaños de texto.

Títulos o encabezados

Podemos utilizar las etiquetas <font size> … </font size> para crear títulos y subtítulos, para el título usaremos un tamaño mayor a los encabezados y distinguirlos del texto de los  párrafos. Un ejemplo sería:

Este ejemplo nos muestra un encabezado y un subtítulo usando las etiquetas de tamaño del texto. El resultado sería:

Existe un modo más sencillo para hacer los títulos o encabezados y es con una etiqueta para encabezados:

Donde # puede ser un número del 1 al 6, siendo el 1 el título de mayor tamaño y el 6 el título de menor tamaño. Habitualmente se suelen utilizar los tamaños del 1 al 3.

Usando <h#> tenemos la ventaja de ahorrar muchas etiquetas en la página y permitirá que sea más comprensible para otras personas que vea nuestro código. Usando <h#> equivale a usar <p> seguido de <font size=#> junto a sus etiquetas de cierre </font></p>.

Tipos de letra

Con todo lo que hemos aprendido podemos dar un aspecto a nuestra página mucho más atractivo, aunque aún queda por retocar. También podemos modificar el tipo de letra, es decir, la forma en la que los caracteres van a ser mostrados en pantalla. La etiqueta <font> ... </font> también permite especificar el nombre de la fuente de caracteres que queremos utilizar. Linux y Windows pone un nombre a cada una de las diferentes fuentes disponibles, nombres como Arial, Times, Courier.

La sintaxis es:

Podemos combinar los atributos face y size para, por ejemplo, mostrar un tipo de letra y tamaño específico.

Un ejemplo:

Visto en nuestro navegador:

Debemos tener cuidado en la elección del tipo de fuente ya que el usuario final podría no disponer de dicha fuente, por eso no es muy aconsejable que hagamos uso de esta opción o utilizar fuentes que sepamos que son estándar para todos los usuarios.

  • Prueba diferentes tipos de fuentes que no sean las tres del ejemplo de arriba.

Tipos de letras definidos

Las siguientes etiquetas llevan definidos unos tipos de letra que están relacionadas con una información en particular:

  • <address> ... </address>.- Esta etiqueta se suele utilizar para poner la dirección del autor de la página.
  • <strong> ... </strong> .- Esta etiqueta vista anteriormente se utiliza para marcar en negrita el texto delimitado. Equivale prácticamente a <b> ... </b>.
  • <em> ... </em>.- Como ya hemos visto anteriormente, sirve para dar énfasis y equivale a <i> ... </i>.
  • <cite> ... </cite>.- Se utiliza para insertar una cita bibliográfica en su página. Generalmente , se muestra del mismo modo que el texto con las etiquetas <em> ... </em>.
  • <code> … </code>.- Se emplea para mostrar en la página el código fuente de un programa o página HTML mostrando el texto como si estuviera escrito a máquina.

    Otra forma de poner esta etiqueta es <listing> ... </listing>. Estas etiquetas no permiten ningún tipo de anidado en su interior.
  • <dfn> ... </dfn>.- Se usa para enmarcar las definiciones mostrándose del mismo modo que <em> ... </em>.
  • <kbd> ... </kbd>.- Se emplea para escribir un texto como si se tratase de una máquina de escribir antigua. Otra forma de hacerlo es con las etiquetas <tt> ... </tt>. Por lo general, se muestra del mismo modo que si usamos las etiquetas <code> ... </code>.
  • <samp> ... </samp>.- Se usa para distinguir los ejemplos del resto de documentos. Se suele mostrar del mismo modo que la etiqueta <code> ... </code>. Otra forma de poner esta etiqueta es <exp> ... </exp>.
  • <var> ... </var>.-Su definición es texto variable. Podemos considerarla como un comodín para usos no especificados en las etiquetas anteriores. Por lo general, se muestra del mismo modo que el texto que utiliza la etiqueta <em> ... </em>.
  • <pre> ... </pre>.- Esta etiqueta respeta los saltos de línea y todos los espacios que se incluyan entre las palabras situadas dentro de las etiquetas. Utiliza el mismo modo de texto que con las etiquetas <code> ... </code>. Dentro de las etiquetas <pre> ... </pre> no podrá usar etiquetas que definan el formato de un párrafo. <pre> ... </pre> acepta el atributo opcional width (<pre width=#>), donde # indica el número máximo de caracteres por línea para que el navegador ajuste el tamaño y tabulación del texto.
  • <plaintext>.- Esta etiqueta hay que manejarla con cuidado. Si la ponemos en una página web, todo el texto que viene a continuación se presentara como un texto plano, es decir,  que se muestra en el navegador tal y como se ha escrito. El problema es que no tiene una etiqueta para el final por lo que desde el lugar donde se ponga hasta el final del documento se mostrará tal cual.

Coloreando nuestro documento

Ahora que hemos aprendido en teoría tratar con títulos, introducido texto, hacer saltos de línea, cambiar la alineación de los párrafos, usar estilos y cambiar el tamaño de de las letras. Ahora toca colorear nuestro documento. Para eso utilizaremos las etiquetas <font> ... </font> que nos permitirá especificar el color con el que serán mostradas las letras:

Donde color es el nombre del color que queremos aplicar (en inglés). Por ejemplo:

Visualizaremos en nuestro navegador:

Código de los principales colores

aunque hay una amplia gama de colores definidos en HTML, puede que necesite especificar un color en concreto a medida. En este caso, deberá indicarlo en la forma:

Donde “******” debe ir en un código que indica el color que deseamos utilizar. Este código se llama RGB, ya que con el se indica la cantidad de rojo (R, red), verde (G, green) y azul (B, blue) que posee mediante un número de seis cifras. Con la adición de estos tres colores primarios se puede construir cualquier otro color. O sea, tenemos que las dos primeras cifras definirán el color rojo, las dos siguientes el verde y las dos últimas el color azul.

Código RGB de los principales colores.

Color de fondo de la página

En la etiqueta <body> le podemos añadir unos parámetros bastante útiles que nos permite definir el color que tendrá el fondo de la página o el color por defecto del texto, veamos estos parámetros:

  • <body bgcolor=color>.- Cambia el color del fondo de una página. Si no se indica nada en la etiqueta <body>, el color por defecto de la página es el blanco. Podemos poner el color que queramos (ver tablas de colores) en formato con nombre o con formato RGB.

  • <body text=color>.- Cambia el color del texto de toda la página, excepto en los casos que utilicemos <font color...>.

Podemos también utilizar ambas etiquetas con <body>.

  • En nuestro editor favorito teclee el código necesario para mostrar está página:

Sangrado y alineaciones

Esto se pone interesante, con todo lo que hemos visto por ahora, podemos comprobar lo que HTML nos ofrece. Otra de las características  típicas de un procesador de texto, es la posibilidad de introducir sangrados en su página. El sangrado consiste en desplazar los límites laterales del párrafo hacia hacia dentro, de modo que quede espacio libre a ambos lados. Para sangrar un texto tenemos la etiqueta…

…si dentro de esta etiqueta añadimos otra igual, este párrafo aparecerá con un sangrado aún más adentro.

  • Cree sus propias publicaciones creando sangrados y guarde el documento.
  • Visualícelo en su navegador favorito.

Alineando múltiples párrafos

Por ahora hemos visto que para alinear un párrafo (izquierda, centrada, derecha), usamos el atributo align en la etiqueta <p>, como vimos anteriormente. Si tenemos que poner este atributo en cada uno de los párrafos que queramos aplicar una alineación, puede hacerse tedioso incluso copiando y pegando.

Existe una forma más sencilla de aplicar una alineación de varios grupos de párrafos mediante la etiqueta…

… donde tipo sería left, center, right y justify.

Esta etiqueta funciona igual que <p align=...>, sólo que en su interior se colocan todos los párrafos (con sus respectivos <p> ... </p>) a los que se desea aplicar la alineación.

Otros efectos con el texto

Existen varias etiquetas que producen curiosos efectos sobre el texto que tienen poco uso. Una de ellas es <blink> ... </blink>, hace que el texto entre las dos etiquetas aparezca parpadeando. Aunque hay navegadores que no ejecutan esta etiqueta.

Otras etiquetas interesantes son <sub> ... </sub> y <sup> ... </sup> que permiten insertar subíndices y superíndices respectivamente.

Insertando líneas de separación

Existe una forma de separar los párrafos, mediante líneas de separación. Esta línea consiste en una recta que va de extremo  a extremo del navegador.

Para mostrar una línea hacemos uso de la etiqueta <hr>, al igual que la etiqueta <br> ambas carecen de etiqueta de cierre ya que se aplican en un punto en concreto de la página. La etiqueta <hr> admite varios atributos:

  • align.- Funciona del mismo modo que align de <p> e indica cómo será mostrada la línea en la pantalla: centrada (center), a la izquierda (left) o a la derecha (right).
  • size=#.- Indica el alto en puntos (denominado píxeles) que tendrá la línea.
  • width=#.- Indica la anchura de la línea. La anchura la definiremos en píxeles o en tanto por ciento del ancho de la página (añadiendo el símbolo %).
  • Ensaya con las distintas maneras de mostrar una línea, elige varias alturas y ancho de las líneas y observa el comportamiento en tu navegador.

Etiquetas de información (tooltips)

Un tooltip es un pequeño recuadro amarillo que aparece con frecuencia en Windows y en  Linux y que contiene una breve explicación de lo que hace el objeto sobre el que se encuentra el ratón.

Podemos incluir tooltips en nuestra página web, aunque tiene más sentido hacerlo sobre enlaces e imágenes, como veremos más adelante. No obstante para que se sepa que existe esa posibilidad, podemos asociar un tooltip a párrafos de su página mediante el atributo title, del siguiente modo:

Como hemos comentado no es usual su utilización en párrafos, aplicándose solamente sobre imágenes y enlaces, como veremos en siguientes secciones.