Dominando las anotaciones rubí en HTML

Introducción

En la tipografía de Asia Oriental, el texto rubí es una pequeña anotación de texto generalmente colocada encima o a la derecha de un carácter. Este texto proporciona la pronunciación o la traducción del carácter. El texto rubí es un componente importante de la anotación rubí en HTML. En este laboratorio, aprenderá a crear anotaciones rubí utilizando la etiqueta HTML <rt>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") 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-70823{{"Explicación de la anotación rubí en HTML"}} html/head_elems -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} html/charset -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} html/para_br -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} html/text_dir -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} html/doc_flow -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} html/inter_elems -.-> lab-70823{{"Explicación de la anotación rubí en HTML"}} end

Configuración del documento HTML

Primero, creemos un nuevo documento HTML en el archivo index.html. Agregue el siguiente código al archivo:

<!doctype html>
<html>
  <head>
    <title>Ejemplo de anotación rubí</title>
  </head>
  <body>
    <h1>Ejemplo de anotación rubí</h1>
  </body>
</html>

Esta estructura básica configura el documento que usaremos para crear nuestro ejemplo de anotación rubí.

Agregando texto rubí

A continuación, agregaremos algunos textos que queremos anotar con texto rubí. Agregue el siguiente código después de la etiqueta h1:

<p>
  Aquí hay algunos textos que queremos anotar con texto rubí. En la tipografía
  de Asia Oriental, el texto rubí se utiliza para proporcionar la pronunciación
  o la traducción de un carácter.
</p>

Creando una anotación rubí

Ahora, creemos una anotación rubí para un carácter del texto. Usaremos la etiqueta <ruby> para encerrar el carácter y la etiqueta <rt> para proporcionar el texto rubí. Agregue el siguiente código después del párrafo:

<p>
  Aquí hay algunos textos que queremos anotar con texto rubí. En la tipografía
  de Asia Oriental, el texto rubí se utiliza para proporcionar la pronunciación
  o la traducción de un carácter.
</p>

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

En este ejemplo, estamos encerrando el carácter '漢' con la etiqueta <ruby>. Luego, estamos usando la etiqueta <rt> para proporcionar el texto rubí 'hàn'.

Agregando más caracteres

Agregemos algunos más caracteres a nuestro ejemplo. Reemplace el código de la etiqueta <ruby> con lo siguiente:

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

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

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

En este código, estamos agregando dos caracteres más a nuestro ejemplo y los estamos anotando con su respectivo texto rubí.

Probando la anotación rubí

Guarde el archivo index.html y abrálo en un navegador web. Debería ver la siguiente salida:

En esta salida, puede ver los caracteres anotados con su respectivo texto rubí.

Resumen

¡Felicidades! Has creado con éxito anotaciones rubí utilizando la etiqueta <rt> de HTML. El texto rubí es un componente importante de la anotación rubí en HTML y se utiliza en la tipografía de Asia Oriental para proporcionar la pronunciación o la traducción de un carácter.