Saltar al contenido principal
Codigo Heroe
Tarea anterior
Marcado de texto avanzado12/19
A la lista de tareas
  1. 1. Conectar y quitar hojas de estilo
  2. 2. La etiqueta ul: listas no ordenadas
  3. 3. La etiqueta ol: listas ordenadas
  4. 4. Los atributos start y reversed
  5. 5. Listas anidadas
  6. 6. Las etiquetas dl, dt y dd: listas de descripciones
  7. 7. La etiqueta pre: texto preformateado
  8. 8. Entidades HTML
  9. 9. La etiqueta code: fragmentos de código
  10. 10. Combinar pre y code
  11. 11. La etiqueta q: citas dentro de una oración
  12. 12. La etiqueta blockquote: citas en bloque
  13. 13. La etiqueta br: saltos de línea
  14. 14. Las etiquetas sub y sup: subíndices y superíndices
  15. 15. La etiqueta time: fechas y horas
  16. 16. Las etiquetas em e i: énfasis y texto diferenciado
  17. 17. Las etiquetas strong y b: importancia y atención
  18. 18. Las etiquetas del e ins: marcar cambios
  19. 19. Las etiquetas div y span: contenedores para estilos
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

La etiqueta blockquote: citas en bloque

Agregamos un poema completo a la entrada. Ya no es una cita breve dentro de un párrafo, así que <q> no nos sirve.

Para las citas extensas, que pueden contener varios párrafos, existe <blockquote>. La cita se presenta como un bloque de texto independiente, con márgenes, en lugar de formar parte de una oración.

Al igual que <q>, <blockquote> puede tener un atributo cite con la dirección de la fuente. También podemos acompañarlo de <cite>, que suele colocarse dentro de la cita. Por ejemplo:

<blockquote>
  <p>La inteligencia vale más cuando la fuerza vale menos.</p>
  <cite>Jason Statham</cite>
</blockquote>

El navegador suele agregar márgenes horizontales a <blockquote>.

Agregamos algunos estilos de espaciado, borde y color para mejorar el aspecto de <blockquote>. Puedes verlos en la pestaña style.css.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Sigue siendo el día siete. Cupcake me dio una tarea</h1> <p>Hoy vino Cupcake y me dio una tarea algo peculiar. Una gatita se mudó junto a su casa y él no sabe componer canciones. Por eso me pidió que buscara una gran obra para cantársela.</p> <p>Como se suele decir, <q>para un buen gato, hasta febrero es primavera</q> (<cite>sabiduría popular</cite>).</p> <p>Encontré este poema para Cupcake:</p> <!-- Inicia la cita aquí --> Miau miau miau prrr miau miaaau miau miau miau Obras reunidas de M. Gatínez. <p>Espero que a la vecina de Cupcake le guste esta balada.</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } blockquote { padding-left: 14px; border-left: 2px solid #6a2cce; color: #6a2cce; } cite { color: #222222; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Envuelve el texto de las líneas 24 a 29 en <blockquote>.
    2. Dentro de la cita, envuelve el poema en <p>.
    3. Envuelve la fuente de la cita en <cite>.
    Codigo Heroe

    © 2023-2026, codigoheroe.com