Formateo de citas HTML con la etiqueta <cite>

HTMLBeginner
Practicar Ahora

Introducción

Esta práctica te introduce la etiqueta HTML <cite>, que se utiliza para mostrar una cita en un formato diferente al texto normal. En esta práctica, aprenderás a usar la etiqueta <cite> junto con la etiqueta <blockquote> para citar al autor de una cita en tu documento HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Incluye el elemento

Para usar el elemento <cite>, debe estar incluido en tu documento HTML. La sintaxis necesaria para ello se muestra a continuación:

<cite>... </cite>

Agrega contenido dentro del elemento

Para mostrar una cita, el contenido que se va a citar se inserta dentro de la etiqueta <cite>.

<cite>El texto que se va a citar</cite>

Utiliza los elementos
y juntos

Para citar al autor de una cita, usamos la etiqueta <blockquote> junto con la etiqueta <cite>.

<blockquote>
  "El texto que se va a citar."
  <cite>Nombre del autor</cite>
</blockquote>

Nota: El texto citado está entrecomillado y el nombre del autor está dentro de la etiqueta <cite>.

Aplica CSS a la etiqueta

Por defecto, el texto dentro de la etiqueta <cite> está en cursiva. También podemos aplicar estilos CSS adicionales a la etiqueta <cite> para cambiar la apariencia de la cita. Aquí hay un ejemplo:

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "El texto que se va a citar."
  <cite>Nombre del autor</cite>
</blockquote>

Resumen

En este laboratorio, aprendimos cómo usar la etiqueta HTML <cite> para mostrar una cita en un formato diferente al texto normal. También aprendimos cómo usar la etiqueta <cite> junto con la etiqueta <blockquote> para citar al autor de una cita en nuestro documento HTML. Finalmente, discutimos cómo aplicar estilos CSS a la etiqueta <cite> para cambiar la apariencia de la cita.