Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En este video aprenderemos como añadir citas a nuestro texto y como colocarles el formato correcto
La primera etiqueta que aprenderemos es la etiqueta blockquoute
La etiqueta blockquoute se usa para colocar citas, así que vamos a usarla para ver cómo funciona
Primero colocamos la etiqueta blockquoute, y luego cerramos la etiqueta
Dentro de esta etiqueta necesitamos usar una etiqueta de párrafo, una etiqueta p
Debido a que vamos a colocar un conjunto de texto bastante amplio para ser una cita
Así que añadimos nuestra cita, que en este caso será
La libertad, Sancho, es uno de los más preciosos dones que a los hombres dieron los cielos; con ella no pueden igualarse los tesoros que encierran la tierra y el mar: por la libertad, así como por la honra, se puede y debe aventurar la vida.
Que es una cita de Miguel de Cervantes, de su obra el Quijote de la Mancha
Y ya tendríamos nuestra cita añadido, ahora vamos a guardar, regresar a nuestro navegador
Y al refrescar podrás ver que aparece ahora nuestra cita
Probablemente también notes que esta frase citada tiene una pequeña sangría, eso es debido a que este texto es una cita
Y no tiene el mismo margen que el texto o los párrafos normales
ahora aprenderemos como añadir la fuente de la cita dentro del código HTML
De esa forma podemos añadir el autor de la cita si lo deseamos
La referencia de la cita debe ser una URL
Así que vamos a colocarnos dentro de la etiqueta blocquoute y colocaremos el atributo cite, luego el símbolo igual y entre comillas la URL de donde hemos sacado la cita
En este ejemplo digamos que viene de ejemplo.com/quijote.html
De esta forma indicamos que esta cita proviene de esta dirección
Ahora guardamos y regresamos a nuestro navegador, y al refrescar el navegador podrás ver que en realidad nada ha cambiado
Pero semánticamente, en el código de nuestra página, tenemos la referencia para esta cita
Y si lo deseas puedes mostrar la referencia usando CSS, pero es algo que veremos en el curso de CSS, después de terminar con HTML
La siguiente etiqueta es la etiqueta q
La etiqueta q es similar a la etiqueta blockquote, pero se usa en los inline elements, es decir que se usa dentro del mismo párrafo y no es necesario que se encuentren en un párrafo aparte
Y en cambio la etiqueta blockquoute si se usa para añadir citas que requieren su propio párrafo
¿Qué significa todo esto?
Bien vamos a la práctica para entenderlo mejor
Luego de la etiqueta blockquote vamos a bajar un poco y crearemos un nuevo párrafo afuera he independiente de la etiqueta blockquote
Así que creamos el párrafo y vamos a escribir algún texto
Vamos a colocar, un hombre dijo alguna vez y colocamos la etiqueta q
Si buscas resultados distintos, no hagas siempre lo mismo
Y cerramos la etiqueta q
Ahora guardamos nuestro documento, regresamos al navegador y refrescamos
Y observa el párrafo que acabamos de crear
Como puedes ver tiene la cita dentro de el
El párrafo no se encuentra dentro de un blockquote, así que no tiene el margen o la sangría que tiene el párrafo que si se encuentra dentro de un blockquote
Sin embargo con la etiqueta q, tenemos la capacidad de añadir comillas a las citas que hagamos dentro del párrafo
no necesitamos añadir las comillas manualmente, ya que se añaden automáticamente cuando colocamos el texto dentro de la etiqueta q
Y al igual que con el blockquoute, podemos añadir referencias a la cita, para indicar de donde proviene
Así que vamos a regresar al editor y dentro de la etiqueta q añadiremos el atribute cite, un símbolo de igual y la URL de donde proviene la frase
Digamos que viene de ejemplo.com/alberteinstein.html
Y si guardamos los cambios, vamos al navegador y refrescamos
Podrás notar que al igual que con el blockquoute nada que podamos ver ha cambiado
Pero semánticamente hemos añadido la referencia de la cita al documento

4 Comments on “Citas”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image