Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
Ruby characters are annotation marks that are used to show pronunciation in some East Asian languages like Chinese and Japanese. Let's make a working copy of asian.html and we'll call this asian-working.html. I'll open that in the text editor, and you can see we have couple of examples here showing the first one has some Japanese annotation marks and the second one has some Chinese annotation marks, and in each of these examples I have it both with Unicode characters and with named and numbered entities.
So if your browser isn't displaying the Unicode versions properly, you can uncomment the other version and that should work. Let's go ahead and open this in the browser so you can see what this looks like. And in this case, I am going to be using Google Chrome. Here you will notice that we have a couple of different versions of the ideograms for kanji or hanzi in Chinese; kanji is Japanese and hanzi is Chinese, and it's the same word in both and it means Chinese character, and in both of these cases, they are annotated and in the top case it's annotated in Japanese with the hiragana and in the bottom case it's annotated in the Chinese with the Pinyin.
Now I just learned all of that by reading about it. I don't actually speak either of these languages, but I'll show you how we can do this in the HTML. I am just going to turn on the wrapping here. So the tag is a container that contains all of its text including the actual characters and the annotations. The rt container contains the annotation itself and the rp container contains some extra text that's only displayed in the case where the browser does not support Ruby.
So for example, if I open this same page up in Firefox, Firefox does not actually support the Ruby, and you see that in this case, it shows these rp characters. So I have rp with the parentheses on either side of the rt with the actual ruby, and so this allows the Ruby to be shown next to the character, and it's in parentheses to set it apart from the character that's being annotated.
So the same happens down here in the Chinese example and this is simplified Chinese with the pinyin reading next to it, and if we look at this in Chrome, we see that the pinyin is above it because Chrome supports the Ruby. So it's really as simple as that. So the tag is an easy way in HTML to add Ruby characters to East Asian characters.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.