Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this lesson we're going to apply a typographic accent. We're going to fix the name of the designer quoted. The O in his name should have an umlaut. You need the files quote_accent.html and quote_accent.css from the Exercise folder. Open up the HTML file in the browser to see what we're working with/ You'll see the designer's name appears three times, here at the start of the text and again at the bottom.
It spelled incorrectly with the plain O. This makes his name Hoger, but his last name is H?ger and it should be spelled with an umlaut over the O. We need to add this. If you already know how to add typographic accents to letters using your keyboard commands, you might be tempted to do the same for your HTML text. Don't do it. The keyboard commands might show up in your browser, but most browsers do not recognize them and they will make it difficult to validate your HTML.
Instead we're going to use character entities which help the HTML show characters that won't otherwise work. Open up your HTML document in your text editor. We're going to find his name, here's the first instance, and we are going to replace the O with ö. We can take that syntax, we can copy it, and we'll replace the other two as well.
There's one right here. Paste and then down at the bottom, paste. Save this and review it in our browser. His name now has an umlaut. There are lots of characters that use entities, not just typographic accents. To view a chart of them I recommend going to w3schools.com. There are a lot of references for these charts, but I always recommend this one.
Because it does a great job of laying out all the characters you may need. It makes it easy to see the character on the left. Here's the lowercase o umlaut that we just made. And it gives you the option of using the numerical code or the name code. The numerical codes are recommended. They are supported by most browsers. Always take the time to make sure you're using the correct characters. It is respectful to your readers and to your content.
Get unlimited access to all courses for just $25/month.Become a member
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.