4. Formatos de texto

  1. Pàrrafos y líneas
  2. Elementos de frase
  3. Escribir citas
  4. Otros estilos de texto y fuente

Pàrrafos y líneas

Los párrafos de nuestro documento han de ir precedidos de la etiqueta <p>, del inglés paragraf y acaban con </p>. La separación entre párrafos distintos es mayor que la que hay entre dos líneas de un mismo párrafo.

Si lo que queremos es un salto de línea sin cambiar de párrafo utilizaremos la etiqueta <br>, del inglés break, que no necesita etiqueta de cierre.

La tercera forma de separar dos párrafos o dos partes de nuestro documento es con una línea, que conseguiremos con la etiqueta <hr>, del inglés horizontal rule, que tampoco necesita etiqueta de cierre.

Veamos un ejemplo de todo esto junto:

Código Resultado
<p>Aquí empieza un párrafo, aquí hay un salto<br>de línea, aquí termina el </p>párrafo y aquí separamos con una<hr>línea.

Aquí empieza un párrafo, aquí hay un salto
de línea, aquí termina el

párrafo y aquí separamos con una
línea.

Si lo que queremos es todo lo contrario, es decir, que no se produzca un salto de linea entre dos palabras, escribiremos el código &nbsp; entre ellas en vez de un espacio. Por ejemplo para no separar una cantidad de sus unidades: 15.000&nbsp;kilómetros da lugar a 15.000 kilómetros.
Nota: Si quieres ver como actua cambia el tamaño de esta ventana del navegador y observa como siempre permanecen juntos.

Las etiquetas <br> y <hr> no llevan etiqueta de cierre. La etiqueta <p> puede no llevarla, aunque en xhtml es obligado y por tanto recomiendo utilizarla.
Cuando escribimos con distintos formatos de párrafo, por ejemplo distintos encabezados, no importa poner etiquetas de salto. En un mismo párrafo no pueden haber dos formatos de encabezado o párrafo distintos por lo que se produce automáticamente un salto de párrafo.


Actividad 4.1

  1. Abre el archivo inicio.htm.
  2. Separa el texto de la noticia en dos o más párrafos.
  3. Intercala algún salto de linea para mejorar la presentación de la noticia.
  4. Añade una linea horizontal entre el subencabezado y el texto de la noticia.
  5. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.
  6. Observa el resultado y las diferencias entre los diferentes saltos.

Arriba

Elementos de frase

Los elementos de frase añaden información estructural a los fragmentos de texto, indicando por ejemplo una cita, una abreviatura o un texto que queremos resaltar.

Los más comunes son los siguientes:

EtiquetaSignificado
<em> </em>Indica énfasis
<strong> </strong>Indica un énfasis más fuerte
<cite> </cite>Contiene una cita o una referencia a otras fuentes
<dfn> </dfn>Indica que aquí es donde se define este término
<code> </code>Designa un fragmento de código de computadora
<samp> </samp>Designa una muestra de la salida de un programa, script, etc.
<kbd> </kbd>Indica texto que debe ser introducido por el usuario
<var> </var>Indica que el texto es una variable o un argumento de un programa
<abbr> </abbr>Indica una forma abreviada (p.ej., Sr., Atte., Exmo., etc.)
<acronym> </acronym>Indica un acrónimo (p.ej., WWW, OTAN, EEUU, etc.)

Como puedes observar el resultado es muy similar, incluso igual, en muchos de ellos, esto es porque lo único que hacen es indicar qué es un determinado texto. Esto es practico si en una página vamos a utilizar, por ejemplo, varias citas. Podemos definir un estilo propio para todas nuestras citas de manera que resaltaran del resto del documento. En estas páginas utilizo la etiqueta <code> cuando escribo el código Html. Veremos como se hace en el capítulo Hojas de estilo.

Atributos opcionales
titleEste atributo podemos utilizarlo en todas las etiquetas de Html para dar información sobre ésta.
En este caso podríamos usarla para indicar, por ejemplo, el significado del acrónimo WWW.
<acronym title="World Wide Web">WWW</acronym>
Si pasas el cursor por encima verás el significado.
langEste atributo también es común a la mayoría de etiquetas de Html para dar información sobre el idioma.
En el caso anterior indicaríamos que proviene del inglés mediante:
<acronym lang="en" title="World Wide Web">WWW</acronym>

Actividad 4.2

  1. Abre el archivo inicio.htm.
  2. Señala las abreviaturas o acrónimos que hayas incluido en la noticia con la etiqueta correspondiente. Si no tienes ninguna añádelas.
  3. Escribe dentro de la etiqueta el atributo necesario para indicar el significado de las abreviaturas y acrónimos y el idioma original.
  4. Añade al final del texto tu nombre enfatizado y a continuación, en otro párrafo, una frase tuya.
  5. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.
  6. Observa el resultado pasando el cursor por encima de los acrónimos.

Arriba

Escribir citas

Las citas se utilizan para resaltar un texto del resto del documento, generalmente porque pertenece a otro autor. Las dos formas posibles de indicar una cita en HTML dependen de si la cita es un párrafo nuevo o una frase dentro de un párrafo.

Para distinguir una cita como un párrafo nuevo utilizaremos <blockquote>. Esta etiqueta crea una sangría a izquierda y derecha de la cita resaltándola, como en el ejemplo siguiente:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.

Para indicar una cita dentro de un párrafo utilizaremos <q>. Esta etiqueta no hace nada aparentemente, de manera que si queremos que resalte del resto del documento tendremos que recurrir de nuevo a las hojas de estilo. Así por ejemplo en este documento las citas dentro de un párrafo las hemos diseñado en nuestra hoja de estilo como enfatizadas y entrecomilladas (todavía no visibles en Internet Explorer) y el resultado es: Más vale pájaro en mano, que cientos volando.


Actividad 4.3

  1. Abre el archivo inicio.htm.
  2. Da formato de cita de un párrafo a la frase tuya que escribiste en la actividad anterior.
  3. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Arriba

Otros estilos de texto y fuente

A continuación tienes una tabla con otros posibles estilos de texto:

Etiqueta Estilo
<b> </b> Negrita
<i> </i> Cursiva
<sub> </sub> Subíndice
<sup> </sup> Superíndice
<tt> </tt> Tipográfico
<big> </big> Grande
<small> </small> pequeño

En las versiones anteriores de HTML existía una etiqueta para el subrallado, <u> y dos más para texto tachado <s> y <strike>, si bien en la versión 4 ya no se utilizan y hay que recurrir a las hojas de estilo.


Actividad 4.4

  1. Crea un nuevo archivo agua.htm con el editor de textos según aprendiste en la actividad 2.1.
  2. Escribe el siguiente texto ajustándote al formato que tiene.
    agua.htm
  3. Guarda el archivo y ábrelo en el navegador para comprobar el resultado.

Aunque ya no se recomienda su uso la principal etiqueta hasta ahora para cambiar el aspecto de la fuente de texto y que todavía utilizan muchos diseñadores de páginas web es <font>. Esta etiqueta ha desaparecido en la versión 4 con la aparición de las hojas de estilo, mucho más potentes, aunque la mayoría de navegadores aún las interpretan.
En el tutorial de Html 32, que puede descargarse en la Presentación de este tutorial, se explica su uso.

Arriba

Encabezados Encabezados Valid HTML 4.01! Hojas de estilo Hojas de estilo