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).
Quotation marks can of course be added using your keyboard, but smarter quotes are available using the q element. Let's go ahead and a make a working copy of quotes.html and name that quotes-working.html, and I'll go ahead and open that in my text editor, and you can see I have a little bit of CSS up here at the top and I'll talk about that in a couple of minutes. And otherwise, we've some Lourem ispum down here in a couple paragraphs, bring this in smaller, and turn on wrapping, and we will go ahead and open this in the browser as well.
So you'll notice here I've this
element right there, and over here in the
browser you see we have these quote marks for it, and I can't even select it with my
cursor, because it's not actually selectable.
You see the cursor selection goes around it, but these are smarter quotes.
You see we have the curly left quote and the curly right quote, and what's
interesting here is if I come in here in the middle and I put another
just this word here, it uses nested quote rules to use single quotes for that.
So there is the 'quis' word and you see it's got single quotes and we've got the
double quotes around the outside.
How these quotes are presented is controlled by this stylesheet up here, and it's notable that if I didn't have the stylesheet up here, different browsers work in different ways. Firefox will use the smart curly quotes, Chrome and Safari and the other WebKit browsers will use straight quotes; different browsers do this in different ways. And so by specifying it in your CSS like this, then you can control how the quotes happen. So for example, if I come in here and this paragraph and I set the language to French, say and now when I reload this in the browser, you notice that my quotes are now French style quotes.
I have the angle quotes around the outside and I've got the curly quotes around the inside, and I can actually control that inside of here. If I set the language to de for German, I save that and come over here and reload, you see now we have the low quote at the beginning and the high quote at the end, and they are also backwards of your American English, and we have the single version of that on the inside quotes. If I set it for British English, I say en-gb; you notice I've that defined up here.
In Britain, they use single quotes for the outer quotes and double quotes for the inner quotes, and this is all controlled here in this CSS. You'll also notice I've a block quote element down here. Block quote as its name implies is a block level quote and it for quoting blocks of text. And most browsers will just indent that on both sides, some of them will also put them in italics, and again, you can control that behavior in CSS as well. So HTML5 has a lot of options for quotes, especially when combined with CSS.
Both the Q element and the block quote element are available for in line and block oriented quotes respectively.
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.