Meisterung der HTML Ruby-Anmerkungen

Einführung

In der ostasiatischen Typografie ist die Ruby-Schrift ein kleiner Textkommentar, der normalerweise über einem Zeichen oder rechts davon platziert wird. Dieser Text liefert die Aussprache oder die Übersetzung des Zeichens. Ruby-Schrift ist ein wichtiger Bestandteil der Ruby-Anmerkung in HTML. In diesem Lab werden Sie lernen, wie Sie Ruby-Anmerkungen mit der HTML-Tag <rt> erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Einrichten der HTML-Dokumentation

Zunächst erstellen wir eine neue HTML-Dokumentation in der Datei index.html. Fügen Sie den folgenden Code in die Datei ein:

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

Diese grundlegende Struktur legt das Dokument fest, das wir verwenden werden, um unser Ruby-Anmerkungsbeispiel zu erstellen.

Hinzufügen von Ruby-Text

Als nächstes fügen wir einige Texte hinzu, die wir mit Ruby-Schrift annotieren möchten. Fügen Sie den folgenden Code nach dem h1-Tag hinzu:

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

Erstellen einer Ruby-Anmerkung

Lassen Sie uns nun eine Ruby-Anmerkung für ein Zeichen im Text erstellen. Wir verwenden das <ruby>-Tag, um das Zeichen zu umschließen, und das <rt>-Tag, um den Ruby-Text bereitzustellen. Fügen Sie den folgenden Code nach dem Absatz hinzu:

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

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

In diesem Beispiel umschließen wir das Zeichen '漢' mit dem <ruby>-Tag. Anschließend verwenden wir das <rt>-Tag, um den Ruby-Text 'hàn' bereitzustellen.

Hinzufügen weiterer Zeichen

Fügen wir unserem Beispiel einige weitere Zeichen hinzu. Ersetzen Sie den <ruby>-Tag-Code durch Folgendes:

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

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

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

In diesem Code fügen wir zwei weitere Zeichen zu unserem Beispiel hinzu und annotieren sie mit ihrem jeweiligen Ruby-Text.

Testen der Ruby-Anmerkung

Speichern Sie die Datei index.html und öffnen Sie sie in einem Webbrowser. Sie sollten die folgende Ausgabe sehen:

Ruby Annotation Example Output

In dieser Ausgabe können Sie die annotierten Zeichen mit ihrem jeweiligen Ruby-Text sehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich Ruby-Anmerkungen mithilfe des HTML <rt>-Tags erstellt. Ruby-Text ist ein wichtiger Bestandteil der Ruby-Anmerkung in HTML und wird in der ostasiatischen Typografie verwendet, um die Aussprache oder die Übersetzung eines Zeichens bereitzustellen.

Erklärung der HTML Ruby-Anmerkung