Formateo de citas HTML con la etiqueta `<cite>`

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.

Skills Graph

Incluye el elemento <cite>

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 <cite>

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>

Usa los elementos <blockquote> y <cite> 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 <cite>

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.