1
00:00:00,000 --> 00:00:02,341
Links são uma excelente forma de conectar

2
00:00:02,341 --> 00:00:04,527
uma página web a outra página web.

3
00:00:04,527 --> 00:00:07,236
Mas eles também podem conectar
uma parte de uma página web

4
00:00:07,236 --> 00:00:09,487
a outra parte na mesma página web.

5
00:00:09,487 --> 00:00:13,668
Especialmente em páginas web muito longas,
como em um índice de conteúdo.

6
00:00:13,668 --> 00:00:16,774
Eu adicionei agora um monte
de informação a essa página,

7
00:00:16,774 --> 00:00:18,991
para eu poder te dar uma história da web

8
00:00:18,991 --> 00:00:21,696
e uma história das versões de HTML.

9
00:00:21,696 --> 00:00:26,286
E eu acho que é conteúdo suficiente
para merecer um índice de conteúdo.

10
00:00:26,286 --> 00:00:29,420
E eu comecei um aqui em cima,
apenas uma lista não ordenada,

11
00:00:29,420 --> 00:00:32,741
cujos itens são cada um
dos títulos das seções.

12
00:00:32,969 --> 00:00:35,206
E eu quero ligar cada um
desses títulos de seção

13
00:00:35,206 --> 00:00:38,438
para que você possa clicar neles
e ir para aquela parte da página.

14
00:00:38,564 --> 00:00:41,701
Para fazer isso, mais
uma vez usei a <i>tag</i> '< a >'.

15
00:00:41,701 --> 00:00:45,622
Então vou começar
envolvendo esse título

16
00:00:45,622 --> 00:00:48,260
com <i>tags</i> '< a >' no início e no fim.

17
00:00:48,260 --> 00:00:54,384
Agora, o que deveria ser colocado
como o <i>href</i> deste link?

18
00:00:54,749 --> 00:00:57,628
Precisamos de alguma
forma dizer ao navegador

19
00:00:57,628 --> 00:00:59,799
para onde pular na página web.

20
00:00:59,974 --> 00:01:03,163
Um jeito de identificar unicamente
essa parte da página.

21
00:01:03,491 --> 00:01:06,337
Se você já aprendeu
seletores CSS,

22
00:01:06,337 --> 00:01:09,008
você já viu como
fazer isso, na verdade.

23
00:01:09,332 --> 00:01:13,516
Nós podemos fazer adicionando um
atributo '< id >' a uma <i>tag</i>.

24
00:01:13,915 --> 00:01:18,467
Vamos descer e achar
o cabeçalho aqui.

25
00:01:18,757 --> 00:01:22,571
Vamos adicionar um atributo
'< id >' a esse cabeçalho.

26
00:01:22,921 --> 00:01:25,286
Então eu vou colocar
o meu cursor em '< h2 >'.

27
00:01:25,286 --> 00:01:27,219
digitar <i>id=" " </i>

28
00:01:27,219 --> 00:01:30,082
e pensar em um bom
identificador que é único

29
00:01:30,082 --> 00:01:32,696
como <i>"web-history"</i>.

30
00:01:33,235 --> 00:01:35,646
Vamos subir de volta até o link.

31
00:01:35,712 --> 00:01:39,296
E agora, para dizer ao navegador
para ir a esse link interno,

32
00:01:39,296 --> 00:01:41,957
precisamos começar com
um <i>hashtag</i> (#)

33
00:01:41,957 --> 00:01:45,498
e então digitar exatamente o id
como digitamos lá embaixo.

34
00:01:46,350 --> 00:01:48,090
Então agora...

35
00:01:48,090 --> 00:01:51,339
Pause esse vídeo e tente clicar no link.

36
00:01:51,435 --> 00:01:53,577
Pode ir, eu espero.

37
00:01:56,547 --> 00:01:59,577
Você viu ele descer até essa seção?

38
00:01:59,695 --> 00:02:00,917
Então funcionou!

39
00:02:00,917 --> 00:02:02,877
Nós podemos adicionar
mais links como esse

40
00:02:02,877 --> 00:02:05,555
colocando os atributos id
em cada cabeçalho

41
00:02:05,555 --> 00:02:07,551
e fazendo tags < a >
que apontam para eles.

42
00:02:07,551 --> 00:02:09,408
Mas eu vou deixar isso
para você tentar.

43
00:02:09,408 --> 00:02:12,073
O mais importante a se lembrar
é que <i>IDs</i> devem ser únicos

44
00:02:12,073 --> 00:02:15,312
porque, de outra forma, o navegador
não vai saber para onde pular.

45
00:02:15,420 --> 00:02:17,520
Então os faça legais e descritivos.

46
00:02:17,520 --> 00:02:19,000
Legendado por [Alberto Oliveira]
Revisado por [Fernando dos Reis]