WEBVTT

00:00:00.000 --> 00:00:02.341
Links são uma excelente forma de conectar

00:00:02.341 --> 00:00:04.527
uma página web a outra página web.

00:00:04.527 --> 00:00:07.236
Mas eles também podem conectar
uma parte de uma página web

00:00:07.236 --> 00:00:09.487
a outra parte na mesma página web.

00:00:09.487 --> 00:00:13.668
Especialmente em páginas web muito longas,
como em um índice de conteúdo.

00:00:13.668 --> 00:00:16.774
Eu adicionei agora um monte
de informação a essa página,

00:00:16.774 --> 00:00:18.991
para eu poder te dar uma história da web

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

00:00:21.696 --> 00:00:26.286
E eu acho que é conteúdo suficiente
para merecer um índice de conteúdo.

00:00:26.286 --> 00:00:29.420
E eu comecei um aqui em cima,
apenas uma lista não ordenada,

00:00:29.420 --> 00:00:32.741
cujos itens são cada um
dos títulos das seções.

00:00:32.969 --> 00:00:35.206
E eu quero ligar cada um
desses títulos de seção

00:00:35.206 --> 00:00:38.438
para que você possa clicar neles
e ir para aquela parte da página.

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

00:00:41.701 --> 00:00:45.622
Então vou começar
envolvendo esse título

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

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

00:00:54.749 --> 00:00:57.628
Precisamos de alguma
forma dizer ao navegador

00:00:57.628 --> 00:00:59.799
para onde pular na página web.

00:00:59.974 --> 00:01:03.163
Um jeito de identificar unicamente
essa parte da página.

00:01:03.491 --> 00:01:06.337
Se você já aprendeu
seletores CSS,

00:01:06.337 --> 00:01:09.008
você já viu como
fazer isso, na verdade.

00:01:09.332 --> 00:01:13.516
Nós podemos fazer adicionando um
atributo '< id >' a uma <i>tag</i>.

00:01:13.915 --> 00:01:18.467
Vamos descer e achar
o cabeçalho aqui.

00:01:18.757 --> 00:01:22.571
Vamos adicionar um atributo
'< id >' a esse cabeçalho.

00:01:22.921 --> 00:01:25.286
Então eu vou colocar
o meu cursor em '< h2 >'.

00:01:25.286 --> 00:01:27.219
digitar <i>id=" " </i>

00:01:27.219 --> 00:01:30.082
e pensar em um bom
identificador que é único

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

00:01:33.235 --> 00:01:35.646
Vamos subir de volta até o link.

00:01:35.712 --> 00:01:39.296
E agora, para dizer ao navegador
para ir a esse link interno,

00:01:39.296 --> 00:01:41.957
precisamos começar com
um <i>hashtag</i> (#)

00:01:41.957 --> 00:01:45.498
e então digitar exatamente o id
como digitamos lá embaixo.

00:01:46.350 --> 00:01:48.090
Então agora...

00:01:48.090 --> 00:01:51.339
Pause esse vídeo e tente clicar no link.

00:01:51.435 --> 00:01:53.577
Pode ir, eu espero.

00:01:56.547 --> 00:01:59.577
Você viu ele descer até essa seção?

00:01:59.695 --> 00:02:00.917
Então funcionou!

00:02:00.917 --> 00:02:02.877
Nós podemos adicionar
mais links como esse

00:02:02.877 --> 00:02:05.555
colocando os atributos id
em cada cabeçalho

00:02:05.555 --> 00:02:07.551
e fazendo tags < a >
que apontam para eles.

00:02:07.551 --> 00:02:09.408
Mas eu vou deixar isso
para você tentar.

00:02:09.408 --> 00:02:12.073
O mais importante a se lembrar
é que <i>IDs</i> devem ser únicos

00:02:12.073 --> 00:02:15.312
porque, de outra forma, o navegador
não vai saber para onde pular.

00:02:15.420 --> 00:02:17.520
Então os faça legais e descritivos.

00:02:17.520 --> 00:02:19.000
Legendado por [Alberto Oliveira]
Revisado por [Fernando dos Reis]