Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,005 --> 00:00:03,004
- So far, we've been talking about HTML elements
2
00:00:03,004 --> 00:00:06,008
that help us mark up passages of text on a page.
3
00:00:06,008 --> 00:00:10,002
Paragraphs, headlines, bold and italic...
4
00:00:10,002 --> 00:00:11,002
Lists.
5
00:00:11,002 --> 00:00:13,003
What about including a quote?
6
00:00:13,003 --> 00:00:15,008
Let's look at this quote from Jeremy Keith.
7
00:00:15,008 --> 00:00:18,003
Now, basically this is a paragraph.
8
00:00:18,003 --> 00:00:20,005
So, let's wrap it in P tags.
9
00:00:20,005 --> 00:00:22,006
We can use the cite element to credit
10
00:00:22,006 --> 00:00:25,001
Jeremy as the person who said this.
11
00:00:25,001 --> 00:00:27,003
And we can wrap the whole thing
12
00:00:27,003 --> 00:00:29,007
in a block quote element.
13
00:00:29,007 --> 00:00:32,000
To distinguish it from the surrounding text.
14
00:00:32,000 --> 00:00:35,004
These two elements cite and block quote
15
00:00:35,004 --> 00:00:37,008
are being used for their semantic value.
16
00:00:37,008 --> 00:00:39,008
To convey to other computers,
17
00:00:39,008 --> 00:00:42,005
"Hey, this is what this is".
18
00:00:42,005 --> 00:00:44,001
They're also convenient places to
19
00:00:44,001 --> 00:00:45,007
use the target styling.
20
00:00:45,007 --> 00:00:47,007
We can make each of these elements look
21
00:00:47,007 --> 00:00:50,005
however we want using CSS.
22
00:00:50,005 --> 00:00:51,009
We can make the block quotes stand
23
00:00:51,009 --> 00:00:53,009
out and look special.
24
00:00:53,009 --> 00:00:56,004
In this example inside the block quote element
25
00:00:56,004 --> 00:00:59,007
we have two paragraphs and the cite.
26
00:00:59,007 --> 00:01:02,008
We can put any element inside this block quote.
27
00:01:02,008 --> 00:01:04,001
We can put a list in there.
28
00:01:04,001 --> 00:01:05,000
A headline.
29
00:01:05,000 --> 00:01:08,001
Elements should be nested inside of each other.
30
00:01:08,001 --> 00:01:10,004
And whatever way makes sense.
31
00:01:10,004 --> 00:01:15,004
So, what about quotes that are not block quotes?
32
00:01:15,004 --> 00:01:17,001
What about quotes that are just worked
33
00:01:17,001 --> 00:01:18,008
in to the middle of some text?
34
00:01:18,008 --> 00:01:20,004
Like this.
35
00:01:20,004 --> 00:01:24,000
These quote marks are simply typed in to the text.
36
00:01:24,000 --> 00:01:26,004
Although, these are straight quote marks.
37
00:01:26,004 --> 00:01:29,006
And I think they really should be curly quotes.
38
00:01:29,006 --> 00:01:32,008
Although, that is my topographic eye that says
39
00:01:32,008 --> 00:01:34,009
that these should be curly quotes.
40
00:01:34,009 --> 00:01:37,001
For many of you around the world there
41
00:01:37,001 --> 00:01:39,003
all kinds of other ways that these
42
00:01:39,003 --> 00:01:41,002
quote marks should be displayed.
43
00:01:41,002 --> 00:01:44,000
It depends on the language, the script or the
44
00:01:44,000 --> 00:01:47,000
types of in conventions of a particular region.
45
00:01:47,000 --> 00:01:50,000
Instead of typing the quotes manually.
46
00:01:50,000 --> 00:01:52,001
We can use the "q" element.
47
00:01:52,001 --> 00:01:55,005
And let the browser provide the quote marks for us.
48
00:01:55,005 --> 00:01:59,001
"Q" stands for quote.
49
00:01:59,001 --> 00:02:02,000
Here, I've taken this quote and translated it.
50
00:02:02,000 --> 00:02:03,008
You can see that the quote marks are
51
00:02:03,008 --> 00:02:06,007
different in these other languages.
52
00:02:06,007 --> 00:02:09,008
Comparing the block quote element to the "q" element.
53
00:02:09,008 --> 00:02:12,004
Is a good example of something you might
54
00:02:12,004 --> 00:02:16,005
start to intuit about HTML.
55
00:02:16,005 --> 00:02:21,002
Some of these elements are what's called "Inline".
56
00:02:21,002 --> 00:02:24,003
They're meant for wrapping around phrases of content
57
00:02:24,003 --> 00:02:27,002
that are inline with some other content.
58
00:02:27,002 --> 00:02:28,007
Like the "q" element.
59
00:02:28,007 --> 00:02:31,005
Strong, b, I, and em.
60
00:02:31,005 --> 00:02:32,009
And many more.
61
00:02:32,009 --> 00:02:35,009
They are inline elements.
62
00:02:35,009 --> 00:02:38,003
You wrap them around phrases of text or
63
00:02:38,003 --> 00:02:41,006
they have a similar kind of inline purpose.
64
00:02:41,006 --> 00:02:45,005
Other elements are block-level elements.
65
00:02:45,005 --> 00:02:50,002
Block quote, paragraph, unordered lists.
66
00:02:50,002 --> 00:02:53,006
These elements each start a new block.
67
00:02:53,006 --> 00:02:56,001
They're a thing on the page.
68
00:02:56,001 --> 00:02:59,005
A block that can be followed by another block.
69
00:02:59,005 --> 00:03:03,000
There's a lot of nerdy detail about this
70
00:03:03,000 --> 00:03:05,007
that I could go in to but I won't.
71
00:03:05,007 --> 00:03:07,007
Some of this is about CSS.
72
00:03:07,007 --> 00:03:09,009
And when you use CSS you can switch
73
00:03:09,009 --> 00:03:11,009
the switch the layout behavior from
74
00:03:11,009 --> 00:03:15,008
block to inline or from inline to block.
75
00:03:15,008 --> 00:03:18,001
But, before you get in to thinking
76
00:03:18,001 --> 00:03:20,001
about layout or CSS.
77
00:03:20,001 --> 00:03:23,003
There is this inherit sense that you start
78
00:03:23,003 --> 00:03:26,003
to build up about some these HTML elements.
79
00:03:26,003 --> 00:03:28,002
Some are to mark something that's
80
00:03:28,002 --> 00:03:30,000
part of a bigger thing.
81
00:03:30,000 --> 00:03:33,004
And some are the bigger thing.
82
00:03:33,004 --> 00:03:35,007
"Q" and block quote elements are good
83
00:03:35,007 --> 00:03:38,006
examples to compare inline to block.
84
00:03:38,006 --> 00:03:41,003
They almost do the same thing.
85
00:03:41,003 --> 00:03:43,002
But, then they don't.
86
00:03:43,002 --> 00:03:45,002
One is for inline phrases and the
87
00:03:45,002 --> 00:03:48,000
other is for creating a block context.
88
00:03:48,000 --> 00:03:49,002
That's how to mark up quotes.
89
00:03:49,002 --> 00:03:53,000
The block quote, "q" and cite elements.
6220
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
