Dominando as Anotações Ruby em HTML - Guia Completo

Introdução

Na tipografia do Leste Asiático, o texto ruby (ruby text) é uma pequena anotação de texto geralmente colocada acima ou à direita de um caractere. Este texto fornece a pronúncia ou tradução do caractere. O texto ruby é um componente importante da anotação ruby em HTML. Neste laboratório, você aprenderá como criar anotações ruby usando a tag HTML <rt>.

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.

Configurando o Documento HTML

Primeiramente, vamos criar um novo documento HTML no arquivo index.html. Adicione o seguinte código ao arquivo:

<!doctype html>
<html>
  <head>
    <title>Ruby Annotation Example</title>
  </head>
  <body>
    <h1>Ruby Annotation Example</h1>
  </body>
</html>

Esta estrutura básica configura o documento que usaremos para criar nosso exemplo de anotação ruby.

Adicionando Texto Ruby

Em seguida, adicionaremos algum texto que queremos anotar com texto ruby. Adicione o seguinte código após a tag h1:

<p>
  Aqui está algum texto que queremos anotar com texto ruby. Na tipografia do
  Leste Asiático, o texto ruby é usado para fornecer a pronúncia ou tradução de
  um caractere.
</p>

Criando uma Anotação Ruby

Agora, vamos criar uma anotação ruby para um caractere no texto. Usaremos a tag <ruby> para envolver o caractere e a tag <rt> para fornecer o texto ruby. Adicione o seguinte código após o parágrafo:

<p>
  Aqui está algum texto que queremos anotar com texto ruby. Na tipografia do
  Leste Asiático, o texto ruby é usado para fornecer a pronúncia ou tradução de
  um caractere.
</p>

<ruby> 漢 <rt>hàn</rt> </ruby>

Neste exemplo, estamos envolvendo o caractere '漢' com a tag <ruby>. Em seguida, estamos usando a tag <rt> para fornecer o texto ruby 'hàn'.

Adicionando Mais Caracteres

Vamos adicionar mais alguns caracteres ao nosso exemplo. Substitua o código da tag <ruby> pelo seguinte:

<ruby> 漢 <rt>hàn</rt> </ruby>

<ruby> 字 <rt>zì</rt> </ruby>

<ruby> 表 <rt>biǎo</rt> </ruby>

Neste código, estamos adicionando mais dois caracteres ao nosso exemplo e anotando-os com seus respectivos textos ruby.

Testando a Anotação Ruby

Salve o arquivo index.html e abra-o em um navegador web. Você deve ver a seguinte saída:

Exemplo de Saída da Anotação Ruby

Nesta saída, você pode ver os caracteres anotados com seus respectivos textos ruby.

Resumo

Parabéns! Você criou com sucesso anotações ruby usando a tag HTML <rt>. O texto ruby é um componente importante da anotação ruby em HTML e é usado na tipografia do Leste Asiático para fornecer a pronúncia ou tradução de um caractere.

Explicação da Anotação Ruby em HTML