3-HTML5:Textos

HTML: Textos

Objetivos

Aprender las distintas etiquetas de formato para texto en HTML.

Fuentes de información

Contenidos

1. Introducción

En esta unidad descubriremos las etiquetas que nos van a permitir dar formato a nuestros textos en la web.

2. Etiquetas HTML de texto

Antes de empezar a conocer las etiquetas que nos permiten dar formato al texto en HTML tenemos que tener en cuenta algunas peculiaridades del lenguaje.

Si creamos un documento HTML y en el bloque <body> comenzamos a escribir normalmente, veremos cuando intentemos visualizar nuestro documento en el navegador que todo el texto aparece de forma ininterrumpida, es decir, no mantiene ni los saltos de línea que hayamos realizado ni las espacios adicionales ni las tabulaciones ni nada. Por ejemplo, si escribimos lo siguiente:

Esto es un ejemplo:
en teoría aquí ha habido un salto de línea             y ahora hemos dejado muchos espacios en blanco
y para acabar							acabamos de apretar la tecla tabulación varias veces

El resultado que obtendremos será:

No se ha respetado nada, sólo el texto. Hay un pequeño truco para que se nos respete el formato con el que escribimos, consiste en incluir todo el texto con el formato deseado entre las etiquetas <pre> y </pre>, todo el texto incluido en ellas se respeta tal y como se escriba, pero tiene muchas limitaciones. Para dar formato al texto que vemos en cualquier página web, correctamente, se utilizan etiquetas especiales, a continuación comenzaremos a revisar las principales.

Para separar bloques de texto usaremos: Títulos

<h1> y </h1> se utilizan para definir un texto como título, indicando que es una cabecera (la h viene de header, cabecera en inglés) que queremos destacar sobre el resto del texto. Junto a <h1> contamos con <h2>, <h3> y así hasta <h6> para definir diferentes títulos, de mayor a menor importancia. Una página web bien diseñada contará con estos encabezados para definir los distintos apartados del texto, con sus diferentes niveles.
<p> y </p> se emplean para definir un bloque de texto que se comporta como un párrafo. Normalmente no dejaremos nunca una porción de texto suelta por la página web, sino que la rodearemos con esas etiquetas.
<br /> inserta un salto de línea en el texto. No genera un nuevo párrafo, sino que parte la línea en dos. Es un elemento puntual, que no lleva etiqueta de cierre.
<hr /> inserta un salto de línea en el texto, pero mostrando una línea horizontal visible.
<blockquote> y </blockquote> inserta un sangrado en el texto, una tabulación.

Si por ejemplo escribimos el siguiente código:

<p>Esto es un ejemplo de párrafo.</p>
<p>Este es otro párrafo.</p>
<p>Esto es una línea a la que<br /> insertamos un salto de línea</p>
<p>Y ahora insertamos una línea horizontal<hr /></p>

El resultado que obtenemos es:

Ejemplos

Con estas etiquetas ya somos capaces de mostrar un texto en nuestro documento HTML de forma aseada, pero tenemos que aprender más.

En el caso de que queramos escribir algún símbolo "extraño", podemos tener problemas, o en el caso de querer insertar varios espacios en blanco detrás de una palabra tampoco es trivial.

Los caracteres especiales como signos de puntuación, espacios en blanco, letras con tilde o diéresis o símbolos del lenguaje se deben convertir en entidad HTML para mostrarse en un navegador.

La siguiente es una lista de los principales caracteres y su correspondiente entidad HTML:

Carácter	Entidad HTML	Carácter	Entidad HTML
á	á	Á	Á
é	é	É	É
í	í	Í	Í
ó	ó	Ó	Ó
ú	ú	Ú	Ú
ü	ü	Ü	Ü
ñ	ñ	Ñ	Ñ
¡	¡	¿	¿
ç	ç	€	€
<	<	>	>

Además tendremos que tener en cuenta que si queremos añadir espacios en blanco adicionales tendremos que hacer uso de   tantas veces como espacios queramos.

Para añadir espacios en blanco en el texto HTML se utiliza el código   y para representar los caracteres < y > se usan respectivamente < y >

Conociendo las peculiaridades del HTML vamos a ver ahora las etiquetas que nos van a permitir darle el formato adecuado:

<strong> y </strong>: para destacar una parte del texto. Normalmente el texto incluido entre esas etiquetas se representa en negrita.
<em> y </em>: se emplea para enfatizar un texto; habitualmente se representa en cursiva.
<i> e </i>: hacen que un texto se muestre en cursiva. La estética es similar al caso anterior, aunque su significado desde la óptica del lenguaje HTML es diferente.

Como la mayoría de las etiquetas HTML podemos anidarlas para obtener así un texto doblemente destacado, en este caso con negrita y cursiva. Quedaría de la siguiente manera:

<p>El bloque siguiente es muy <strong><em>importante</em></strong></p>

Al anidar diferentes etiquetas es importante mantener el orden al cerrarlas. La última que hayamos abierto será la primera en cerrarse, como en el ejemplo anterior.

Junto a <strong> y <em> tenemos otras etiquetas destinadas a dar sentido a una parte concreta de la página web:

<dfn> para definiciones
<code> para bloques de código informático
<samp> para ejemplos
<kbd> para texto de teclado
<var> para definir una variable
<cite> para una cita.

Cada uno tiene una apariencia concreta, aunque como veremos a continuación pueden ser modificadas con facilidad. Lo importante aquí es que el texto adquiere un significado específico, dependiendo de las etiquetas que lo rodeen.

Eso es todo lo que tenemos a nuestro alcance para destacar un parte de un texto mediante etiquetas. En versiones antiguas de HTML existían otras etiquetas muy utilizadas como <b>, <i>, <font>, etc., pero todas ellas han sido abandonadas en las últimas revisiones del lenguaje HTML. Para aplicar formato a una web emplearemos estilos.

3. Listas

HTML nos facilita tres etiquetas diferentes para diseñar listas: dos muy empleadas y una tercera menos habitual.

3.1. Listas no ordenadas

Este tipo de listas se abren con la etiqueta <ul> y se cierran con su correspondiente </ul>. El ul proviene de unsortered list (lista desordenada, en español).

Para distinguir cada elemento de la lista, emplearemos la etiqueta <li>, con su correspondiente cierre. Así una lista típica quedaría así:

<h1>Material requerido</h1>
<ul>
<li>Lápiz</li>
<li>Papel</li>
<li>Pegamento</li>
<li>Tijeras</li>
</ul>

Al insertarlo en una página web, obtendremos el resultado de la imagen:

Ejemplo

Cada <li> puede contener todo lo que se nos antoje, desde párrafos completos hasta imágenes, vídeos o cualquier otro elemento.

3.2. Listas ordenadas

El segundo tipo es similar al anterior, pero cambiando el <ul> por un <ol>, es decir ordered list (lista ordenada). Así conseguiremos que los puntos se numeren.

<h1>Forma de empleo</h1>
<ol>
<li>Dibujamos las figuras con el lápiz.</li>
<li>Usando las tijeras iremos recortando las figuras cuidadosamente.</li>
<li>Por último, pegaremos cada parte por las partes indicadas.</li>
</ol>

El resultado se muestra en la siguiente imagen:

Ejemplo

3.3. Listas de definiciones

El tercer tipo, menos habitual, se utiliza para diseñar listas de términos y descripciones asociadas a ellos. La etiqueta <dl> (definition list) abre y cierra la lista, la etiqueta <dt> (definition term) se usa para especificar el término y <dd> (definition description) para describirlo. Todas ellas acompañadas de sus cierres.

<h1>Utilidad de cada elemento</h1>
<dl>
<dt>Lápiz</dt>
<dd>Se emplea para plasmar los diseños sobre el papel</dd>
<dt>Papel</dt>
<dd>Una vez dibujado será recortado y posteriormente pegado</dd>
<dt>Pegamento</dt>
<dd>Utilizaremos sus peculiares características para dar forma al objeto uniendo las partes de papel</dd>
</dl>

Al mostrarse en un navegador, las definiciones aparecen desplazadas respecto a los términos, como se recoge en la imagen:

Ejemplo

3.4. Anidando listas

Como el resto de etiquetas de HTML, las listas se pueden anidar, así podemos tener una lista ordenada que a su vez dentro es desordenada, o dos ordenadas una dentro de otra.

Es muy sencillo anidar las listas, antes de cerrar la etiqueta de la lista superior añadimos una nueva lista del tipo que necesitemos, así el código podría ser el siguiente con el resultado que se muestra justo al lado:

<ul>
 <li>Elemento 1 de la primera lista desordenada
    <ol>
      <li>Elemento 1 de la sublista ordenada</li>
      <li>Elemento 2 de la sublista ordenada</li>
    </ol>
  </li>
  <li>Elemento 2 de la primera lista desordenada
    <ol>
      <li>Elemento 1 de la sublista ordenada</li>
      <li>Elemento 2 de la sublista ordenada</li>
    </ol>
  </li>
</ul>

Ejercicio

Vamos a ponernos manos a la obra:

Crea un nuevo documento HTML y guárdalo como textos.htm.
Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
Añade las etiquetas meta para el autor, descripción y palabras claves.
Añade la etiqueta de título con el texto "Mis primeros textos".
En el bloque de <body> escribe una línea de texto en el que indiques la etiqueta que estás usando para mostrarla. Debes utilizar las siguientes etiquetas: <dfn>, <code>, <samp>, <kbd>, <var>, <cite> , <strong>, <em>, <i>. Para separar las distintas líneas utiliza la línea horizontal que hemos aprendido a insertar.
A continuación debes dejar varias líneas en blanco y a continuación hacer que se muestre en nuestro documento HTML correctamente la frase: "España está en el €. El Barça es campeón de europa y el Madrid de la liga", ojo con los caracteres extraños.
En el mismo documento ahora deberás añadir una lista NO ordenada con los compañeros de clase.Con el título "Lista no ordenada".
A continuación una lista ordenada por filas de los compañeros de clase, que a su vez será una lista desordenada. Con el título "Lista ordenada".
Seguidamente una lista de definiciones con dos definiciones para las etiquetas <strong> y <h1>. Con el título "Lista de definiciones".
Ya para acabar deberás crear una lista ordenada de los días de la semana y dentro de cada día otra lista ordenada de las materias a las que asistes ese día. Con el título "Horario".

El documento debe quedar algo parecido a lo siguiente (pero completo...)

Ejercicio

Guarda el documento textos.htm y súbelo a la plataforma.