[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.34,Default,,0000,0000,0000,,Links são uma excelente forma de conectar
Dialogue: 0,0:00:02.34,0:00:04.53,Default,,0000,0000,0000,,uma página web a outra página web.
Dialogue: 0,0:00:04.53,0:00:07.24,Default,,0000,0000,0000,,Mas eles também podem conectar\Numa parte de uma página web
Dialogue: 0,0:00:07.24,0:00:09.49,Default,,0000,0000,0000,,a outra parte na mesma página web.
Dialogue: 0,0:00:09.49,0:00:13.67,Default,,0000,0000,0000,,Especialmente em páginas web muito longas,\Ncomo em um índice de conteúdo.
Dialogue: 0,0:00:13.67,0:00:16.77,Default,,0000,0000,0000,,Eu adicionei agora um monte\Nde informação a essa página,
Dialogue: 0,0:00:16.77,0:00:18.99,Default,,0000,0000,0000,,para eu poder te dar uma história da web
Dialogue: 0,0:00:18.99,0:00:21.70,Default,,0000,0000,0000,,e uma história das versões de HTML.
Dialogue: 0,0:00:21.70,0:00:26.29,Default,,0000,0000,0000,,E eu acho que é conteúdo suficiente\Npara merecer um índice de conteúdo.
Dialogue: 0,0:00:26.29,0:00:29.42,Default,,0000,0000,0000,,E eu comecei um aqui em cima,\Napenas uma lista não ordenada,
Dialogue: 0,0:00:29.42,0:00:32.74,Default,,0000,0000,0000,,cujos itens são cada um\Ndos títulos das seções.
Dialogue: 0,0:00:32.97,0:00:35.21,Default,,0000,0000,0000,,E eu quero ligar cada um\Ndesses títulos de seção
Dialogue: 0,0:00:35.21,0:00:38.44,Default,,0000,0000,0000,,para que você possa clicar neles\Ne ir para aquela parte da página.
Dialogue: 0,0:00:38.56,0:00:41.70,Default,,0000,0000,0000,,Para fazer isso, mais\Numa vez usei a {\i1}tag{\i0} '< a >'.
Dialogue: 0,0:00:41.70,0:00:45.62,Default,,0000,0000,0000,,Então vou começar\Nenvolvendo esse título
Dialogue: 0,0:00:45.62,0:00:48.26,Default,,0000,0000,0000,,com {\i1}tags{\i0} '< a >' no início e no fim.
Dialogue: 0,0:00:48.26,0:00:54.38,Default,,0000,0000,0000,,Agora, o que deveria ser colocado\Ncomo o {\i1}href{\i0} deste link?
Dialogue: 0,0:00:54.75,0:00:57.63,Default,,0000,0000,0000,,Precisamos de alguma\Nforma dizer ao navegador
Dialogue: 0,0:00:57.63,0:00:59.80,Default,,0000,0000,0000,,para onde pular na página web.
Dialogue: 0,0:00:59.97,0:01:03.16,Default,,0000,0000,0000,,Um jeito de identificar unicamente\Nessa parte da página.
Dialogue: 0,0:01:03.49,0:01:06.34,Default,,0000,0000,0000,,Se você já aprendeu\Nseletores CSS,
Dialogue: 0,0:01:06.34,0:01:09.01,Default,,0000,0000,0000,,você já viu como\Nfazer isso, na verdade.
Dialogue: 0,0:01:09.33,0:01:13.52,Default,,0000,0000,0000,,Nós podemos fazer adicionando um\Natributo '< id >' a uma {\i1}tag{\i0}.
Dialogue: 0,0:01:13.92,0:01:18.47,Default,,0000,0000,0000,,Vamos descer e achar\No cabeçalho aqui.
Dialogue: 0,0:01:18.76,0:01:22.57,Default,,0000,0000,0000,,Vamos adicionar um atributo\N'< id >' a esse cabeçalho.
Dialogue: 0,0:01:22.92,0:01:25.29,Default,,0000,0000,0000,,Então eu vou colocar\No meu cursor em '< h2 >'.
Dialogue: 0,0:01:25.29,0:01:27.22,Default,,0000,0000,0000,,digitar {\i1}id=" " {\i0}
Dialogue: 0,0:01:27.22,0:01:30.08,Default,,0000,0000,0000,,e pensar em um bom\Nidentificador que é único
Dialogue: 0,0:01:30.08,0:01:32.70,Default,,0000,0000,0000,,como {\i1}"web-history"{\i0}.
Dialogue: 0,0:01:33.24,0:01:35.65,Default,,0000,0000,0000,,Vamos subir de volta até o link.
Dialogue: 0,0:01:35.71,0:01:39.30,Default,,0000,0000,0000,,E agora, para dizer ao navegador\Npara ir a esse link interno,
Dialogue: 0,0:01:39.30,0:01:41.96,Default,,0000,0000,0000,,precisamos começar com\Num {\i1}hashtag{\i0} (#)
Dialogue: 0,0:01:41.96,0:01:45.50,Default,,0000,0000,0000,,e então digitar exatamente o id\Ncomo digitamos lá embaixo.
Dialogue: 0,0:01:46.35,0:01:48.09,Default,,0000,0000,0000,,Então agora...
Dialogue: 0,0:01:48.09,0:01:51.34,Default,,0000,0000,0000,,Pause esse vídeo e tente clicar no link.
Dialogue: 0,0:01:51.44,0:01:53.58,Default,,0000,0000,0000,,Pode ir, eu espero.
Dialogue: 0,0:01:56.55,0:01:59.58,Default,,0000,0000,0000,,Você viu ele descer até essa seção?
Dialogue: 0,0:01:59.70,0:02:00.92,Default,,0000,0000,0000,,Então funcionou!
Dialogue: 0,0:02:00.92,0:02:02.88,Default,,0000,0000,0000,,Nós podemos adicionar\Nmais links como esse
Dialogue: 0,0:02:02.88,0:02:05.56,Default,,0000,0000,0000,,colocando os atributos id\Nem cada cabeçalho
Dialogue: 0,0:02:05.56,0:02:07.55,Default,,0000,0000,0000,,e fazendo tags < a >\Nque apontam para eles.
Dialogue: 0,0:02:07.55,0:02:09.41,Default,,0000,0000,0000,,Mas eu vou deixar isso\Npara você tentar.
Dialogue: 0,0:02:09.41,0:02:12.07,Default,,0000,0000,0000,,O mais importante a se lembrar\Né que {\i1}IDs{\i0} devem ser únicos
Dialogue: 0,0:02:12.07,0:02:15.31,Default,,0000,0000,0000,,porque, de outra forma, o navegador\Nnão vai saber para onde pular.
Dialogue: 0,0:02:15.42,0:02:17.52,Default,,0000,0000,0000,,Então os faça legais e descritivos.
Dialogue: 0,0:02:17.52,0:02:19.00,Default,,0000,0000,0000,,Legendado por [Alberto Oliveira]\NRevisado por [Fernando dos Reis]