Texto en superíndice: Eleva tu contenido HTML

Introducción

La etiqueta HTML sup te permite mostrar texto en formato de superíndice en una página web. En este laboratorio, demostraremos cómo usar la etiqueta sup para crear texto en superíndice.

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.

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.

Configurando el archivo HTML

Crea un archivo HTML llamado index.html y configura la estructura básica de HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Texto en superíndice</title>
  </head>
  <body></body>
</html>

Agregando texto en superíndice

Agrega la etiqueta sup al archivo HTML. Dentro de las etiquetas de apertura y cierre del elemento sup, agrega el texto que quieres mostrar como superíndice.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Texto en superíndice</title>
  </head>
  <body>
    <p>
      Mi dirección de correo electrónico es:
      user123<sup>@</sup>example<sup>.</sup>com
    </p>
  </body>
</html>

Dar estilo al texto en superíndice

Puedes dar estilo a la etiqueta sup usando CSS para ajustar su tamaño de fuente y alineación vertical. Agrega el siguiente código CSS a tu archivo HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Texto en superíndice</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>
      Mi dirección de correo electrónico es:
      user123<sup>@</sup>example<sup>.</sup>com
    </p>
  </body>
</html>

Agregando notación matemática

El texto en superíndice es un componente importante de la notación matemática. Puedes usar la etiqueta sup para representar exponentes y potencias. Por ejemplo, agrega el siguiente código a tu archivo HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Texto en superíndice</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>El valor de 2<sup>3</sup> es 8.</p>
  </body>
</html>

Resumen

En este laboratorio, aprendimos sobre la etiqueta sup en HTML. Vimos cómo crear texto en superíndice y usarlo para representar exponentes y potencias. También aprendimos cómo dar estilo a la etiqueta sup usando CSS. Con las habilidades aprendidas en este laboratorio, ahora puedes agregar fácilmente texto en superíndice a tus páginas HTML.

Texto en superíndice en HTML