Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,000 --> 00:00:02,008
- So far we've just been looking at the basics
2
00:00:02,008 --> 00:00:04,003
of an HTML element.
3
00:00:04,003 --> 00:00:06,000
The simple version.
4
00:00:06,000 --> 00:00:07,009
Like the paragraph element,
5
00:00:07,009 --> 00:00:11,003
but HTML does have a bit more complexity than this.
6
00:00:11,003 --> 00:00:13,009
More power that can be added to any element
7
00:00:13,009 --> 00:00:16,001
through what's called an attribute.
8
00:00:16,001 --> 00:00:18,003
We did look at one attribute so far,
9
00:00:18,003 --> 00:00:20,004
When learning about the time element.
10
00:00:20,004 --> 00:00:23,007
Some attributes only work on certain elements,
11
00:00:23,007 --> 00:00:25,003
like the day time attribute.
12
00:00:25,003 --> 00:00:28,000
We only use it on the time element.
13
00:00:28,000 --> 00:00:30,001
Other attributes work on several of the elements,
14
00:00:30,001 --> 00:00:31,003
but not all of them.
15
00:00:31,003 --> 00:00:33,003
We'll get into some examples of those when we learn
16
00:00:33,003 --> 00:00:35,002
about images and video.
17
00:00:35,002 --> 00:00:38,007
Lets look at a few global attributes.
18
00:00:38,007 --> 00:00:40,007
Global Attributes are attributes in HTML
19
00:00:40,007 --> 00:00:43,003
that will work on any element.
20
00:00:43,003 --> 00:00:45,004
I'm going to cover four of the most useful
21
00:00:45,004 --> 00:00:47,009
global attributes.
22
00:00:47,009 --> 00:00:50,008
The most commonly used attribute is the class attribute.
23
00:00:50,008 --> 00:00:55,002
It gives us a way to attach a reusable name to any element.
24
00:00:55,002 --> 00:00:58,000
So, we can address that name in our CSS and apply styling
25
00:00:58,000 --> 00:01:01,004
to all the elements that have that class.
26
00:01:01,004 --> 00:01:03,004
Id is another popular one,
27
00:01:03,004 --> 00:01:07,003
it's similar to class but we're only allowed to use unique
28
00:01:07,003 --> 00:01:10,005
names once in an entire HTML page.
29
00:01:10,005 --> 00:01:13,002
You can use an ID for targeting CSS,
30
00:01:13,002 --> 00:01:16,006
but it's much more specific and that can be a problem.
31
00:01:16,006 --> 00:01:18,002
So most of the times CSS developers
32
00:01:18,002 --> 00:01:20,000
tend to stick to classes.
33
00:01:20,000 --> 00:01:22,003
Ids are particularly helpful for addressing
34
00:01:22,003 --> 00:01:24,002
particular elements with JavaScript
35
00:01:24,002 --> 00:01:25,009
or, with a targeted link.
36
00:01:25,009 --> 00:01:28,001
The fact that there will only ever be one element
37
00:01:28,001 --> 00:01:30,009
with any particular ID name, becomes useful
38
00:01:30,009 --> 00:01:34,009
when interacting with JavaScript or links.
39
00:01:34,009 --> 00:01:37,005
Whatever the use case, class and ID attributes
40
00:01:37,005 --> 00:01:40,002
give us a way to name certain HTML elements
41
00:01:40,002 --> 00:01:44,003
and refer to them in other parts of the stack up code.
42
00:01:44,003 --> 00:01:46,008
Lets look at the same demo from the last video,
43
00:01:46,008 --> 00:01:48,004
but I made a copy of it and added
44
00:01:48,004 --> 00:01:50,007
classes and IDs to the code.
45
00:01:50,007 --> 00:01:53,002
I use the classes in my CSS and I've added a table
46
00:01:53,002 --> 00:01:55,008
of contents with links that jump to the elements
47
00:01:55,008 --> 00:01:58,003
that have the matching ID.
48
00:01:58,003 --> 00:02:00,003
Other attributes do things.
49
00:02:00,003 --> 00:02:02,005
Content editable lets a visitor to a page
50
00:02:02,005 --> 00:02:06,004
edit the content of that page.
51
00:02:06,004 --> 00:02:09,006
This block quote element can now be edited.
52
00:02:09,006 --> 00:02:13,002
As a user I can change the content on this web page.
53
00:02:13,002 --> 00:02:15,007
Now you noticed that this doesn't change the content
54
00:02:15,007 --> 00:02:19,003
in the HTML and if I refresh the webpage,
55
00:02:19,003 --> 00:02:20,007
it goes back to the original.
56
00:02:20,007 --> 00:02:23,005
That's because HTML alone just provides
57
00:02:23,005 --> 00:02:25,003
the functionality for editing.
58
00:02:25,003 --> 00:02:27,001
Back end developers have to set up a way
59
00:02:27,001 --> 00:02:30,002
for that new content to be captured and saved.
60
00:02:30,002 --> 00:02:31,009
There are many different ways a site
61
00:02:31,009 --> 00:02:33,004
could handle saving content.
62
00:02:33,004 --> 00:02:35,001
So, that needs to be uniquely programmed
63
00:02:35,001 --> 00:02:37,009
for each website, usually in JavaScript.
64
00:02:37,009 --> 00:02:41,009
HTML provides a lot with the content editable attribute.
65
00:02:41,009 --> 00:02:43,006
The interaction for the user.
66
00:02:43,006 --> 00:02:45,008
The way the page becomes editable
67
00:02:45,008 --> 00:02:47,005
and it interacts with focus.
68
00:02:47,005 --> 00:02:49,002
The screen, keyboards,
69
00:02:49,002 --> 00:02:52,000
assistive devices, it's a hook into the power
70
00:02:52,000 --> 00:02:55,008
of the browser, provided by HTML.
71
00:02:55,008 --> 00:02:57,002
There are many attributes like this.
72
00:02:57,002 --> 00:03:00,005
Ones that provide the browser APIs to JavaScript.
73
00:03:00,005 --> 00:03:03,005
Check out other courses for more.
74
00:03:03,005 --> 00:03:05,006
The Lang Attribute gives us a way to tell the browser
75
00:03:05,006 --> 00:03:07,006
what language the content is in.
76
00:03:07,006 --> 00:03:11,007
L-A-N-G= and the short code for the language.
77
00:03:11,007 --> 00:03:13,007
We'll get deeper into how to support languages
78
00:03:13,007 --> 00:03:15,006
on the web and where to find these short codes
79
00:03:15,006 --> 00:03:16,008
in chapter seven.
80
00:03:16,008 --> 00:03:19,000
The dir attribute gives us a way to explicitly
81
00:03:19,000 --> 00:03:23,003
tell the browser in which direction the text flows.
82
00:03:23,003 --> 00:03:26,001
D-I-R stands for direction.
83
00:03:26,001 --> 00:03:30,004
DIR= LTR for scripts that run left to right
84
00:03:30,004 --> 00:03:34,000
and DIR= RTL for right to left.
85
00:03:34,000 --> 00:03:36,000
These are Global Attributes that can be used
86
00:03:36,000 --> 00:03:37,009
on any element in HTML.
87
00:03:37,009 --> 00:03:41,004
There's a list of all the Global Attributes on MDM web docs.
88
00:03:41,004 --> 00:03:44,006
For now just remember what might just be the four
89
00:03:44,006 --> 00:03:46,009
most important Global Attributes:
90
00:03:46,009 --> 00:03:49,007
Class, ID, Lang and Dir.
91
00:03:49,007 --> 00:03:54,000
And consider using them on any element in your (mumbling).
6707
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.