0:00:00.000,0:00:02.341
Links são uma excelente forma de conectar

0:00:02.341,0:00:04.527
uma página web a outra página web.

0:00:04.527,0:00:07.236
Mas eles também podem conectar[br]uma parte de uma página web

0:00:07.236,0:00:09.487
a outra parte na mesma página web.

0:00:09.487,0:00:13.668
Especialmente em páginas web muito longas,[br]como em um índice de conteúdo.

0:00:13.668,0:00:16.774
Eu adicionei agora um monte[br]de informação a essa página,

0:00:16.774,0:00:18.991
para eu poder te dar uma história da web

0:00:18.991,0:00:21.696
e uma história das versões de HTML.

0:00:21.696,0:00:26.286
E eu acho que é conteúdo suficiente[br]para merecer um índice de conteúdo.

0:00:26.286,0:00:29.420
E eu comecei um aqui em cima,[br]apenas uma lista não ordenada,

0:00:29.420,0:00:32.741
cujos itens são cada um[br]dos títulos das seções.

0:00:32.969,0:00:35.206
E eu quero ligar cada um[br]desses títulos de seção

0:00:35.206,0:00:38.438
para que você possa clicar neles[br]e ir para aquela parte da página.

0:00:38.564,0:00:41.701
Para fazer isso, mais[br]uma vez usei a <i>tag</i> '< a >'.

0:00:41.701,0:00:45.622
Então vou começar[br]envolvendo esse título

0:00:45.622,0:00:48.260
com <i>tags</i> '< a >' no início e no fim.

0:00:48.260,0:00:54.384
Agora, o que deveria ser colocado[br]como o <i>href</i> deste link?

0:00:54.749,0:00:57.628
Precisamos de alguma[br]forma dizer ao navegador

0:00:57.628,0:00:59.799
para onde pular na página web.

0:00:59.974,0:01:03.163
Um jeito de identificar unicamente[br]essa parte da página.

0:01:03.491,0:01:06.337
Se você já aprendeu[br]seletores CSS,

0:01:06.337,0:01:09.008
você já viu como[br]fazer isso, na verdade.

0:01:09.332,0:01:13.516
Nós podemos fazer adicionando um[br]atributo '< id >' a uma <i>tag</i>.

0:01:13.915,0:01:18.467
Vamos descer e achar[br]o cabeçalho aqui.

0:01:18.757,0:01:22.571
Vamos adicionar um atributo[br]'< id >' a esse cabeçalho.

0:01:22.921,0:01:25.286
Então eu vou colocar[br]o meu cursor em '< h2 >'.

0:01:25.286,0:01:27.219
digitar <i>id=" " </i>

0:01:27.219,0:01:30.082
e pensar em um bom[br]identificador que é único

0:01:30.082,0:01:32.696
como <i>"web-history"</i>.

0:01:33.235,0:01:35.646
Vamos subir de volta até o link.

0:01:35.712,0:01:39.296
E agora, para dizer ao navegador[br]para ir a esse link interno,

0:01:39.296,0:01:41.957
precisamos começar com[br]um <i>hashtag</i> (#)

0:01:41.957,0:01:45.498
e então digitar exatamente o id[br]como digitamos lá embaixo.

0:01:46.350,0:01:48.090
Então agora...

0:01:48.090,0:01:51.339
Pause esse vídeo e tente clicar no link.

0:01:51.435,0:01:53.577
Pode ir, eu espero.

0:01:56.547,0:01:59.577
Você viu ele descer até essa seção?

0:01:59.695,0:02:00.917
Então funcionou!

0:02:00.917,0:02:02.877
Nós podemos adicionar[br]mais links como esse

0:02:02.877,0:02:05.555
colocando os atributos id[br]em cada cabeçalho

0:02:05.555,0:02:07.551
e fazendo tags < a >[br]que apontam para eles.

0:02:07.551,0:02:09.408
Mas eu vou deixar isso[br]para você tentar.

0:02:09.408,0:02:12.073
O mais importante a se lembrar[br]é que <i>IDs</i> devem ser únicos

0:02:12.073,0:02:15.312
porque, de outra forma, o navegador[br]não vai saber para onde pular.

0:02:15.420,0:02:17.520
Então os faça legais e descritivos.

0:02:17.520,0:02:19.000
Legendado por [Alberto Oliveira][br]Revisado por [Fernando dos Reis]