Etiqueta HTML Blockquote: Mejora de las citas en la página web

Introducción

En HTML, usamos la etiqueta <blockquote> para mostrar citas en una página web con el nombre del autor o la fuente. La etiqueta se utiliza como un elemento de nivel de bloque y se muestra como un párrafo separado. En este laboratorio, aprenderás cómo crear una cita con la etiqueta <blockquote> de HTML.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede 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.

Agrega la estructura HTML

Crea un archivo HTML llamado index.html y dile que se abra en un editor de código.

Agrega la estructura HTML como se muestra a continuación:

<!doctype html>
<html>
  <head>
    <title>Etiqueta HTML Blockquote</title>
  </head>
  <body>
    <h1>Etiqueta HTML Blockquote</h1>

    <!-- Agrega la cita -->
  </body>
</html>

Agrega la etiqueta Blockquote

Agrega la etiqueta blockquote a tu código HTML usando la siguiente sintaxis:

<blockquote>
  Aquí va tu cita...
  <cite>- Nombre del autor</cite>
</blockquote>

Nota: La etiqueta cite se agrega dentro de la etiqueta blockquote para proporcionar el nombre del autor o la fuente de la cita.

Agrega estilo CSS

Agrega estilo CSS a la etiqueta blockquote usando el siguiente fragmento de código:

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Nota: Este código establece un estilo básico para la etiqueta blockquote. La propiedad border-left agrega un borde izquierdo a la etiqueta blockquote.

Agrega la cita que quieres mostrar en la página web reemplazando Aquí va tu cita....

Guarda el archivo HTML y dile que se abra en un navegador web para ver la cita mostrada en la página web.

Resumen

En este laboratorio, aprendiste sobre la etiqueta <blockquote> para mostrar una cita en un bloque separado en una página web. También aprendiste sobre los atributos que se pueden utilizar con la etiqueta y cómo darle estilo con CSS. Con la etiqueta blockquote, ¡puedes mostrar citas en tu página web con facilidad!

Bloque de texto citado en HTML

Introducción

Agrega la estructura HTML

Agrega la etiqueta Blockquote

Agrega estilo CSS

Resumen