All language subtitles for 19 - Navigation.en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,006 --> 00:00:02,008 - Now that we know how to make a link, 2 00:00:02,008 --> 00:00:04,009 and how to structure our URLs, 3 00:00:04,009 --> 00:00:07,000 let's look at some of the most common patterns 4 00:00:07,000 --> 00:00:10,001 for creating a menu or a navigation bar. 5 00:00:10,001 --> 00:00:14,000 Let's say we want to make a main menu bar for our website. 6 00:00:14,000 --> 00:00:15,004 There are four links here. 7 00:00:15,004 --> 00:00:19,007 The words home, people, prices and contact. 8 00:00:19,007 --> 00:00:22,002 We've wrapped each of them in an a element 9 00:00:22,002 --> 00:00:24,000 with the correct URL, 10 00:00:24,000 --> 00:00:27,007 and then I've wrapped each link in a li for list item. 11 00:00:27,007 --> 00:00:29,009 This is a list of links. 12 00:00:29,009 --> 00:00:32,003 The whole list is wrapped in a ul 13 00:00:32,003 --> 00:00:34,008 because the order of the links isn't that important. 14 00:00:34,008 --> 00:00:36,006 It's an unordered list, 15 00:00:36,006 --> 00:00:41,002 and now, I'm going to wrap the whole thing in a nav element. 16 00:00:41,002 --> 00:00:44,007 The nav element is for marking up navigation. 17 00:00:44,007 --> 00:00:46,008 It tells the browser which sets of links 18 00:00:46,008 --> 00:00:49,001 are part of the site navigation. 19 00:00:49,001 --> 00:00:50,008 We don't use it all the time, 20 00:00:50,008 --> 00:00:54,001 just for major blocks of navigational links. 21 00:00:54,001 --> 00:00:56,002 You could see the results on the right. 22 00:00:56,002 --> 00:00:58,009 It looks like a nice main menu bar. 23 00:00:58,009 --> 00:01:00,009 Now, of course, it doesn't look this way 24 00:01:00,009 --> 00:01:02,004 because of the HTML, 25 00:01:02,004 --> 00:01:04,004 I've styled it to look like a menu bar. 26 00:01:04,004 --> 00:01:07,000 Here's what it looks like without the CSS. 27 00:01:07,000 --> 00:01:08,004 It's a list. 28 00:01:08,004 --> 00:01:11,001 Now I want screen readers and other assistive devices 29 00:01:11,001 --> 00:01:14,003 to also know that this is the main menu for the site, 30 00:01:14,003 --> 00:01:16,002 so I'm going to add a few attributes 31 00:01:16,002 --> 00:01:19,004 to convey the purpose of this navigation. 32 00:01:19,004 --> 00:01:23,007 We can add role equals navigation to the nav element. 33 00:01:23,007 --> 00:01:25,008 It's an aria role that is perfect 34 00:01:25,008 --> 00:01:28,005 for marking the main navigation of the page. 35 00:01:28,005 --> 00:01:31,006 It adds the extra kind of importance that's conveyed 36 00:01:31,006 --> 00:01:34,004 to other people visually through graphic design. 37 00:01:34,004 --> 00:01:38,003 I'm also going to add an aria label of main menu. 38 00:01:38,003 --> 00:01:40,007 That provides a label that can be read aloud 39 00:01:40,007 --> 00:01:43,001 by the screen reader to tell people what this is 40 00:01:43,001 --> 00:01:45,000 and to give them more context. 41 00:01:45,000 --> 00:01:47,000 Main menu are the words that I've chosen. 42 00:01:47,000 --> 00:01:50,009 We could say primary navigation or whatever we want. 43 00:01:50,009 --> 00:01:54,009 This isn't the only correct way to markup main navigation, 44 00:01:54,009 --> 00:01:57,004 there are many variations that work just as well, 45 00:01:57,004 --> 00:02:00,004 perhaps better in certain circumstances. 46 00:02:00,004 --> 00:02:03,002 Let's look at another kind of navigational menu 47 00:02:03,002 --> 00:02:04,008 and how we might mark it up. 48 00:02:04,008 --> 00:02:06,005 Here's a breadcrumb trail. 49 00:02:06,005 --> 00:02:10,002 I've also taken these links and made them into a list. 50 00:02:10,002 --> 00:02:12,005 Only this time, I made an ordered list 51 00:02:12,005 --> 00:02:15,006 because the order in a breadcrumb matters. 52 00:02:15,006 --> 00:02:17,008 I'm also wrapping this in a nav element 53 00:02:17,008 --> 00:02:20,008 since this is a navigational aide to get around. 54 00:02:20,008 --> 00:02:23,007 I'm not going to put a role of navigation on it, however. 55 00:02:23,007 --> 00:02:26,000 It's just not important enough. 56 00:02:26,000 --> 00:02:29,000 I think I will add an aria label of breadcrumb. 57 00:02:29,000 --> 00:02:31,001 That will provide a little more context 58 00:02:31,001 --> 00:02:33,007 than if a numbered list of links were read aloud. 59 00:02:33,007 --> 00:02:36,003 Let's look at one more set of links. 60 00:02:36,003 --> 00:02:37,009 How about something like those links 61 00:02:37,009 --> 00:02:40,008 that can be found on the bottom of a page in the footer, 62 00:02:40,008 --> 00:02:43,005 the kind of links that aren't really part of a navigation 63 00:02:43,005 --> 00:02:45,007 or getting around the site. 64 00:02:45,007 --> 00:02:48,009 I'm just marking up each link here as a link, 65 00:02:48,009 --> 00:02:51,008 and wrapping them in a footer element, that's it. 66 00:02:51,008 --> 00:02:53,004 I don't even want to use a nav element 67 00:02:53,004 --> 00:02:54,007 or an unordered list, 68 00:02:54,007 --> 00:02:57,007 it's just two phrases linking to more content. 69 00:02:57,007 --> 00:02:58,007 We have a lot of options 70 00:02:58,007 --> 00:03:01,005 when we start combining HTML elements together. 71 00:03:01,005 --> 00:03:05,001 By thinking about the many actions and how they combine 72 00:03:05,001 --> 00:03:08,000 to layer semantic meaning into our content, 73 00:03:08,000 --> 00:03:11,004 we can start to get it the right choices for our projects. 74 00:03:11,004 --> 00:03:14,002 There's not one right way. 75 00:03:14,002 --> 00:03:18,000 The only for sure is that it depends. 5693

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.