En este laboratorio, aprenderás cómo utilizar las etiquetas HTML <span> para crear estilos de texto en línea y mejorar la presentación visual del contenido web. El laboratorio se centra en comprender el propósito de las etiquetas span, crear una estructura básica de documento HTML y aplicar estilos en línea personalizados a segmentos específicos de texto.
A través de un ejemplo práctico y evolutivo, explorarás cómo se pueden utilizar las etiquetas span para seleccionar y dar estilo a pequeñas porciones de texto sin interrumpir el flujo del documento. Al final de este laboratorio, serás capaz de aplicar colores de texto personalizados, fondos y otras técnicas de estilo en línea utilizando elementos HTML span, lo que proporcionará un formato de texto más dinámico y atractivo visualmente en tus páginas web. Utilizaremos un solo archivo HTML durante todo este laboratorio, agregando gradualmente más funciones y estilos.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"])
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings")
html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction")
html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding")
html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements")
subgraph Lab Skills
html/basic_elems -.-> lab-451038{{"Crear estilos de texto en línea con etiquetas span en HTML"}}
html/text_head -.-> lab-451038{{"Crear estilos de texto en línea con etiquetas span en HTML"}}
html/text_dir -.-> lab-451038{{"Crear estilos de texto en línea con etiquetas span en HTML"}}
html/doc_flow -.-> lab-451038{{"Crear estilos de texto en línea con etiquetas span en HTML"}}
html/inter_elems -.-> lab-451038{{"Crear estilos de texto en línea con etiquetas span en HTML"}}
end
Comprender el propósito de las etiquetas Span
En este paso, aprenderás sobre el propósito y la funcionalidad de las etiquetas <span> en HTML. Las etiquetas <span> son elementos de nivel en línea. Esto significa que están diseñadas para funcionar dentro del flujo de un texto, a diferencia de los elementos de nivel de bloque como <p> o <div> que crean saltos de línea antes y después de ellos. Las etiquetas <span> te permiten aplicar un estilo específico o agregar significado semántico a una pequeña porción de texto dentro de un bloque de contenido más grande.
Imagina que estás resaltando una palabra específica en una frase con un marcador. La etiqueta <span> actúa como ese marcador, permitiéndote seleccionar esa palabra específica para darle estilo.
Son especialmente útiles para:
Aplicar estilos en línea: Cambiar la apariencia de palabras o frases específicas.
Agregar formato personalizado: Hacer que partes del texto estén en negrita, cursiva, de un color determinado, etc.
Resaltar texto específico: Llamar la atención sobre partes importantes de tu contenido.
Seleccionar pequeños segmentos de texto para manipulación con JavaScript o CSS: Darte un control preciso sobre partes individuales de texto.
Vamos a crear un archivo HTML simple para demostrar el uso de las etiquetas <span>. Abre el WebIDE y crea un nuevo archivo llamado styling-example.html en el directorio ~/project. Este archivo será nuestro lienzo para el resto del laboratorio.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
En este ejemplo, la etiqueta <span> envuelve la palabra "special". Por ahora, no cambia la apariencia, pero marca esa palabra como algo que podemos dar estilo más adelante.
Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE. Tómate un momento para previsualizar styling-example.html en el WebIDE. Verás que ambos párrafos se muestran normalmente. La etiqueta <span>, por sí sola, no cambia la apariencia del texto.
Aplicar estilos en línea básicos
Ahora, hagamos que la palabra "special" destaque. En este paso, aprenderás cómo aplicar estilos en línea directamente al elemento <span> utilizando el atributo style. Aplicar estilos en línea significa agregar propiedades CSS directamente dentro de la etiqueta HTML.
Abre el archivo styling-example.html en el WebIDE y modifica la etiqueta <span> de la siguiente manera:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
Hemos agregado el atributo style a la etiqueta <span>. Dentro del atributo style, hemos escrito font-weight: bold;. Esta es una propiedad CSS básica que hace que el texto esté en negrita.
A continuación, una desglose:
style="... ": Este es el atributo HTML que te permite aplicar reglas CSS directamente a este elemento.
font-weight: bold;: Esta es una declaración CSS.
font-weight: Esta es la propiedad CSS que controla qué tan negrita es el texto.
bold: Este es el valor que estamos asignando a la propiedad font-weight.
;: ¡El punto y coma es importante! Separa diferentes declaraciones CSS dentro del atributo style. Si quieres agregar más estilos más adelante, deberás separarlos con puntos y comas.
Vuelve a previsualizar styling-example.html en el WebIDE. Ahora deberías ver la palabra "special" en negrita. Esto demuestra cómo las etiquetas <span> te permiten seleccionar texto específico para darle estilo.
Agregar más estilos en línea
Hagamos que el estilo sea más interesante. Puedes aplicar múltiples estilos en línea a una sola etiqueta <span>. En este paso, agregaremos cursiva y subrayado a nuestra palabra "special".
Abre styling-example.html en el WebIDE y modifica la etiqueta <span> para incluir más estilos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
Hemos agregado dos declaraciones CSS más dentro del atributo style, separadas por puntos y comas:
font-style: italic;: Esto hace que el texto esté en cursiva.
text-decoration: underline;: Esto agrega un subrayado al texto.
¡Recuerda el punto y coma después de cada declaración! Es crucial para que el navegador entienda dónde termina un estilo y comienza el siguiente.
Previsualiza styling-example.html. La palabra "special" ahora debería estar en negrita, cursiva y subrayada. Esto muestra el poder de combinar múltiples estilos en línea con la etiqueta <span>.
Personalizar el color del texto y el fondo
Ahora cambiemos los colores del texto y de su fondo. En este paso, aprenderás cómo utilizar las propiedades CSS color y background-color dentro del atributo style de la etiqueta <span>.
Abre styling-example.html y modifica nuevamente la etiqueta <span>:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
Hemos agregado dos nuevas declaraciones CSS:
color: blue;: Esto establece el color del texto en azul. Puedes utilizar varios nombres de colores (como red, green, black, etc.) o códigos de color hexadecimales (como #FF0000 para el rojo).
background-color: lightyellow;: Esto establece el color de fondo del span en amarillo claro. Al igual que con color, puedes utilizar nombres de colores o códigos hexadecimales.
Previsualiza styling-example.html. La palabra "special" ahora debería estar en negrita, cursiva, subrayada, de color azul y con un fondo amarillo claro. Esto demuestra cómo puedes cambiar significativamente la apariencia de un texto específico utilizando etiquetas <span> y estilos en línea.
Un ejemplo más práctico
Veamos cómo podrías utilizar las etiquetas <span> en un escenario más realista. Imagina que estás creando una descripción de un producto. Quizás quieras resaltar ciertas características o el precio.
Abre styling-example.html y reemplaza su contenido con lo siguiente:
Hemos utilizado <span> para poner en negrita el nombre del producto.
Hemos utilizado <span> para codificar por colores las características principales.
Hemos utilizado <span> para hacer el precio más grande y de color rojo. Observa la propiedad font-size aquí, ¡esto te muestra que también puedes controlar el tamaño del texto! La unidad em es una unidad relativa, lo que hace que el tamaño del texto sea relativo al tamaño de fuente del elemento padre.
Hemos utilizado <span> para resaltar una oferta especial con un color de fondo y un relleno (padding). El padding agrega espacio alrededor del texto dentro del color de fondo.
Previsualiza styling-example.html. Verás cómo las etiquetas <span> se pueden utilizar para agregar énfasis visual y estructura a tu contenido, haciéndolo más atractivo y fácil de leer.
Resumen
En este laboratorio, has aprendido sobre el propósito e implementación de las etiquetas HTML <span>, centrándote en su función para aplicar estilos de texto en línea. Has visto cómo las etiquetas <span>, como elementos de nivel en línea, te permiten seleccionar y dar estilo a porciones específicas de texto sin alterar el flujo general de tu documento.
Has practicado la creación de un documento HTML básico y has ido agregando progresivamente estilos en línea utilizando el atributo style dentro de las etiquetas <span>. Has explorado diversas propiedades CSS como font-weight, font-style, text-decoration, color y background-color, y has aprendido cómo combinarlas para lograr diferentes efectos visuales. Finalmente, has aplicado tus conocimientos para crear un ejemplo más práctico de descripción de producto, demostrando cómo las etiquetas <span> pueden mejorar la presentación y legibilidad de tu contenido web. Ahora estás capacitado para utilizar las etiquetas <span> de manera efectiva para agregar formato de texto dinámico y visualmente atractivo a tus páginas web.
