Texto Sobrescrito HTML: Eleve o Conteúdo da Sua Página Web

Introdução

A tag HTML sup permite exibir texto em formato sobrescrito em uma página web. Neste laboratório, demonstraremos como usar a tag sup para criar texto sobrescrito.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurando o Arquivo HTML

Crie um arquivo HTML chamado index.html e configure a estrutura HTML básica.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

Adicionando Texto Sobrescrito

Adicione a tag sup ao arquivo HTML. Dentro das tags de abertura e fechamento do elemento sup, adicione o texto que você deseja exibir como sobrescrito.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Estilizando o Texto Sobrescrito

Você pode estilizar a tag sup usando CSS para ajustar seu tamanho de fonte e alinhamento vertical. Adicione o seguinte código CSS ao seu arquivo HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Adicionando Notação Matemática

O texto sobrescrito é um componente importante da notação matemática. Você pode usar a tag sup para representar expoentes e potências. Por exemplo, adicione o seguinte código ao seu arquivo HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>The value of 2<sup>3</sup> is 8.</p>
  </body>
</html>

Resumo

Neste laboratório, aprendemos sobre a tag sup em HTML. Vimos como criar texto sobrescrito e usá-lo para representar expoentes e potências. Também aprendemos como estilizar a tag sup usando CSS. Com as habilidades aprendidas neste laboratório, você agora pode adicionar facilmente texto sobrescrito às suas páginas HTML.

Texto Sobrescrito em HTML