Introducción
En este tema, aprenderás a utilizar las etiquetas HTML para crear citas en bloque y texto preformateado. Estas etiquetas son útiles para mostrar citas largas y código o texto que debe mantener su formato original.
Citas en Bloque
¿Qué es una Cita en Bloque?
Una cita en bloque se utiliza para citar un texto extenso de otra fuente. En HTML, se usa la etiqueta <blockquote> para este propósito. Esta etiqueta generalmente añade un margen o sangría al texto citado, diferenciándolo del resto del contenido.
Sintaxis de <blockquote>
<blockquote> Este es un ejemplo de una cita en bloque. Puede contener varias líneas de texto. </blockquote>
Ejemplo Práctico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Cita en Bloque</title>
</head>
<body>
<h1>Ejemplo de Cita en Bloque</h1>
<p>El siguiente es un ejemplo de una cita en bloque:</p>
<blockquote>
"La vida es lo que pasa mientras estás ocupado haciendo otros planes."
- John Lennon
</blockquote>
</body>
</html>Explicación del Código
<blockquote>: Esta etiqueta envuelve el texto citado.- El texto dentro de
<blockquote>se muestra con un margen adicional para diferenciarlo del resto del contenido.
Texto Preformateado
¿Qué es el Texto Preformateado?
El texto preformateado se utiliza para mostrar texto tal como se escribe, manteniendo espacios, saltos de línea y otros caracteres de formato. En HTML, se usa la etiqueta <pre> para este propósito.
Sintaxis de <pre>
Ejemplo Práctico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Texto Preformateado</title>
</head>
<body>
<h1>Ejemplo de Texto Preformateado</h1>
<p>El siguiente es un ejemplo de texto preformateado:</p>
<pre>
function holaMundo() {
console.log("Hola, Mundo!");
}
</pre>
</body>
</html>Explicación del Código
<pre>: Esta etiqueta envuelve el texto que debe mantener su formato original.- El texto dentro de
<pre>se muestra con el mismo espaciado y saltos de línea que tiene en el código fuente.
Ejercicio Práctico
Ejercicio 1: Crear una Cita en Bloque
Instrucciones:
- Crea un archivo HTML.
- Añade una cita en bloque con el siguiente texto: "El éxito es la suma de pequeños esfuerzos repetidos día tras día." - Robert Collier
Solución:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio de Cita en Bloque</title>
</head>
<body>
<h1>Ejercicio de Cita en Bloque</h1>
<blockquote>
"El éxito es la suma de pequeños esfuerzos repetidos día tras día."
- Robert Collier
</blockquote>
</body>
</html>Ejercicio 2: Crear Texto Preformateado
Instrucciones:
- Crea un archivo HTML.
- Añade un bloque de texto preformateado que muestre el siguiente código:
function saludo(nombre) { console.log("Hola, " + nombre + "!"); }
Solución:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio de Texto Preformateado</title>
</head>
<body>
<h1>Ejercicio de Texto Preformateado</h1>
<pre>
function saludo(nombre) {
console.log("Hola, " + nombre + "!");
}
</pre>
</body>
</html>Conclusión
En esta lección, has aprendido a utilizar las etiquetas <blockquote> y <pre> para crear citas en bloque y texto preformateado en HTML. Estas herramientas son esenciales para mostrar citas largas y mantener el formato original del texto, como el código fuente. Asegúrate de practicar estos conceptos para dominarlos completamente.
En el próximo tema, exploraremos cómo crear hipervínculos en HTML. ¡Sigue adelante!
Curso de HTML
Módulo 1: Introducción a HTML
- ¿Qué es HTML?
- Configurando tu Entorno
- Estructura Básica de HTML
- Etiquetas y Elementos HTML
- Creando tu Primera Página HTML
Módulo 2: Formateo de Texto en HTML
- Encabezados y Párrafos
- Etiquetas de Formateo de Texto
- Listas: Ordenadas y Desordenadas
- Citas en Bloque y Texto Preformateado
Módulo 3: Enlaces y Medios en HTML
Módulo 4: Tablas en HTML
- Estructura Básica de una Tabla
- Encabezados y Pies de Tabla
- Unión de Celdas: Colspan y Rowspan
- Estilizando Tablas
Módulo 5: Formularios en HTML
- Creando un Formulario Básico
- Elementos del Formulario: Input, Textarea y Select
- Atributos y Validación del Formulario
- Enviando Formularios
Módulo 6: Elementos Semánticos de HTML5
Módulo 7: Técnicas Avanzadas de HTML
Módulo 8: Integración de HTML y CSS
- Vinculando CSS a HTML
- CSS en Línea, Interno y Externo
- Selectores Básicos de CSS
- Estilizando Elementos HTML
Módulo 9: Diseño Web Responsivo
- Introducción al Diseño Responsivo
- Etiqueta Meta del Viewport
- Consultas de Medios
- Imágenes y Videos Responsivos
Módulo 10: Mejores Prácticas y Accesibilidad
- Mejores Prácticas de HTML
- Conceptos Básicos de Accesibilidad Web
- Usando Roles ARIA
- Pruebas de Accesibilidad