Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

13. ¡Puede Tabularme!

"¿Qué ocurre aquí?" preguntó la etiqueta <blockquote> a las etiquetas <p> y <br>. Ellas respondieron, "¡No estamos seguras pero tú eres muy diferente de nosotras!"

Objetivos

• Insertar un bloque de texto indentado respecto del texto general.
• Aplicar etiquetas de estilo dentro de un bloque de texto indentado.

Lección

Tradicionalmente, la separación de tres o más líneas de texto (o las citas) se efectúa como una indentación del bloque entero. El HTML también incluye esta posibilidad utilizando la etiqueta <blockquote>....</<blockquote>:

<blockquote>
"Esta es una larga cita de una persona muy famosa. Ya que es tan larga
e interesante debería situarse destacada del resto del texto.
Esto indica claramente que la cita es de alguien distinto del escritor."
</blockquote>

---

"Esta es una larga cita de una persona muy famosa. Ya que es tan larga e interesante debería situarse destacada del resto del texto. Esto indica claramente que la cita es de alguien distinto del escritor."

---

Note que podemos aplicar cualquier código HTML que hemos aprendido dentro de las etiquetas <blockquote>, tal y como se ve en el siguiente ejemplo:

<blockquote>
<h2>Un Manifiesto</h2>
Esta es una <B>larga</B> cita de una
<a href="http://www.mcli.dist.maricopa.edu/alan/">
persona muy famosa</a>. 
Ya que es tan larga e interesante debería situarse
<pre>     destacada</pre>
del resto del texto.
<p>
<I>Esto indica</I>:
<ul> 
<li>claramente que
<li>la cita es de
<li>alguien distinto del escritor.
</ul>
</blockquote>

---

Un Manifiesto

Esta es una larga cita de una persona muy famosa. Ya que es tan larga e interesante debería situarse

        destacada

del resto del texto.

Esto indica:

• claramente que
• la cita es de
• alguien distinto del escritor.

---

Añadamos una descripción indentada a la introducción a nuestra página Web de Volcanes. Usaremos una cita de un naturalista romano, Plinio, quien fue testigo de la erupción del Vesubio en el año 79 d.C.

1. Abra el archivo index.htm en su editor de textos.
2. Bajo el encabezado <h1>Web de Volcanes</h1> añada lo siguiente:

   
     <BLOCKQUOTE>
     <b><I>
     "La Naturaleza se enfurece salvajemente, amenazando las tierras"
     </I></b><br>
      -- <a href="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
     Plinio el Viejo</A>, quien murió de asfixia después de
     observar la destrucción de Pompeya por la erupción
     del Vesubio en el año 79 d.C.
     </BLOCKQUOTE>
   

   NOTA: Vea cómo hemos usado una combinación de etiquetas de estilo negrita y cursiva (vea la Lección 5) para enfatizar la cita. La cita es forzada a aparecer en una nueva línea con la etiqueta <br> (vea la Lección 4). También hemos "activado" el texto "Plinio el Viejo" hacia otra página web que contiene más información acerca de Plinio y sus observaciones.

   Vea también cómo la etiqueta <blockquote> fuerza una ruptura de párrafo antes y después del bloque de texto.

   ¡Y observe, finalmente, estas NOTAS (como esta misma) que ha estado viendo a lo largo del tutorial hacen uso de la etiqueta <blockquote>!

3. Salve y Actualice el archivo HTML.

Compruebe Su Trabajo

Revisión

1. ¿Qué hace la etiqueta <blockquote>?
2. ¿Porqué no se necesita una etiqueta <p> antes de indentar un bloque de texto?

Práctica Independiente

Algunos diseñadores utilizan 2 (o más) etiquetas <blockquote> anidadas para crear efectos de retoque de margenes. Por ejemplo:

<BLOCKQUOTE>
  <BLOCKQUOTE>
    <BLOCKQUOTE>"¡Oh, más etiquetas!", se lamentó.
      <p>Y ella replicó, "Recuerda, cariño, que mientras que el HTML pueda
      estar limitado en términos de control
      sobre el diseño de las páginas hay un gran
      potencial en el uso del número de etiquetas."
    </BLOCKQUOTE>
  /BLOCKQUOTE>
</BLOCKQUOTE>

que produce:

"¡Oh, más etiquetas!", se lamentó.

Y ella replicó, "Recuerda, cariño, que mientras que el HTML pueda estar limitado en términos de control sobre el diseño de las páginas hay un gran potencial en el uso del número de etiquetas."

A Continuación....

IR A.... | Índice de Lecciones | anterior: "Direcciones a Pie de Página y Links a E-Mails" | siguiente: "Agrupando vs Dividiendo" |

URL: