[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.29,0:00:02.44,Default,,0000,0000,0000,,Vocês já aprenderam \Nmuitas marcações em HTML.
Dialogue: 0,0:00:02.44,0:00:04.40,Default,,0000,0000,0000,,Mas sabe o que \NHTML realmente significa?
Dialogue: 0,0:00:05.09,0:00:08.90,Default,,0000,0000,0000,,HTML significa: \N"Linguagem de Marcação de Hipertexto".
Dialogue: 0,0:00:09.63,0:00:14.24,Default,,0000,0000,0000,,É uma maneira de usar \Nmarcações para marcar conteúdos.
Dialogue: 0,0:00:14.87,0:00:16.82,Default,,0000,0000,0000,,Mas o que quer dizer hipertexto?
Dialogue: 0,0:00:17.26,0:00:19.09,Default,,0000,0000,0000,,É uma frase que foi inventada
Dialogue: 0,0:00:19.09,0:00:21.18,Default,,0000,0000,0000,,antes mesmo da existência da internet,
Dialogue: 0,0:00:21.18,0:00:24.60,Default,,0000,0000,0000,,nos anos de 1960, para significar \Ntexto que é conectado a outro texto
Dialogue: 0,0:00:24.60,0:00:26.74,Default,,0000,0000,0000,,que o leitor pode\Nimediatamente, pular para.
Dialogue: 0,0:00:27.01,0:00:30.06,Default,,0000,0000,0000,,Tim Berners-Lee inventou o HTML,
Dialogue: 0,0:00:30.06,0:00:32.80,Default,,0000,0000,0000,,e outros ingredientes da \Ninternet, como o HTTP,
Dialogue: 0,0:00:32.80,0:00:35.22,Default,,0000,0000,0000,,uma forma de conectar\Num texto a outros textos
Dialogue: 0,0:00:35.22,0:00:36.92,Default,,0000,0000,0000,,localizados em qualquer lugar.
Dialogue: 0,0:00:37.33,0:00:39.87,Default,,0000,0000,0000,,Como nós conectamos \Npáginas com outras páginas em
Dialogue: 0,0:00:39.87,0:00:41.77,Default,,0000,0000,0000,,Linguagem de Marcação de Hipertexto?
Dialogue: 0,0:00:41.77,0:00:43.79,Default,,0000,0000,0000,,Com um hiperlink, é claro!
Dialogue: 0,0:00:43.79,0:00:46.55,Default,,0000,0000,0000,,O que normalmente \Nchamamos de link, atualmente.
Dialogue: 0,0:00:46.55,0:00:48.70,Default,,0000,0000,0000,,Como fazemos um link em HTML?
Dialogue: 0,0:00:48.97,0:00:50.100,Default,,0000,0000,0000,,Aqui é onde isso fica esquisito.
Dialogue: 0,0:00:50.100,0:00:54.04,Default,,0000,0000,0000,,Você pode ter pensado que nós \Nusamos uma tag "link"...
Dialogue: 0,0:00:54.04,0:00:57.96,Default,,0000,0000,0000,,Mas na verdade, isto é utilizado para \Ndiferentes tipos de link em HTML.
Dialogue: 0,0:00:57.96,0:01:03.23,Default,,0000,0000,0000,,Em vez disso, usamos a \Ntag "a", onde "a" remete a "âncora".
Dialogue: 0,0:01:03.70,0:01:06.95,Default,,0000,0000,0000,,Isso é ancorar o link na \Npágina em um certo local
Dialogue: 0,0:01:06.95,0:01:09.35,Default,,0000,0000,0000,,e conectar essa âncora a \Numa página diferente.
Dialogue: 0,0:01:10.08,0:01:13.38,Default,,0000,0000,0000,,Para fazer um link, você sabe que \Nprecisamos escrever a tag,
Dialogue: 0,0:01:13.38,0:01:15.58,Default,,0000,0000,0000,,mas também precisamos \Ndecidir o texto no link,
Dialogue: 0,0:01:15.58,0:01:17.39,Default,,0000,0000,0000,,e depois o endereço que o link irá.
Dialogue: 0,0:01:17.39,0:01:24.25,Default,,0000,0000,0000,,Vamos fazer esse link para uma página com \Nmais informações sobre a criação da web.
Dialogue: 0,0:01:25.71,0:01:29.98,Default,,0000,0000,0000,,O texto do link irá dentro das \Ntags de início e de final.
Dialogue: 0,0:01:29.98,0:01:32.69,Default,,0000,0000,0000,,Então vou colocar meu \Ncursor aqui e escrever,
Dialogue: 0,0:01:32.69,0:01:37.29,Default,,0000,0000,0000,,"Leia mais sobre a história do HTML".
Dialogue: 0,0:01:37.29,0:01:41.29,Default,,0000,0000,0000,,Então agora podemos ver que o \Ntexto está se parecendo com um link.
Dialogue: 0,0:01:41.29,0:01:45.09,Default,,0000,0000,0000,,Mas ainda não está indo a lugar algum. \NNós precisamos adicionar o endereço.
Dialogue: 0,0:01:45.45,0:01:48.10,Default,,0000,0000,0000,,Não queremos que o endereço \Nfique aparecendo na página,
Dialogue: 0,0:01:48.10,0:01:50.43,Default,,0000,0000,0000,,mas precisamos que o navegador\Nsaiba disso.
Dialogue: 0,0:01:50.43,0:01:53.65,Default,,0000,0000,0000,,Então colocamos isso \Ndentro de um atributo na tag.
Dialogue: 0,0:01:53.65,0:01:55.53,Default,,0000,0000,0000,,Esse é o atributo href.
Dialogue: 0,0:01:57.47,0:01:59.41,Default,,0000,0000,0000,,O que o "href" significa?
Dialogue: 0,0:01:59.88,0:02:03.70,Default,,0000,0000,0000,,Vou lhe dar uma dica:\NVocê tem visto bastante esse "h".
Dialogue: 0,0:02:03.70,0:02:06.52,Default,,0000,0000,0000,,Isso remete a "hiper"!\NHiper-referência.
Dialogue: 0,0:02:06.52,0:02:11.78,Default,,0000,0000,0000,,Agora, vou colar dentro do endereço,\No qual também chamamos de URL.
Dialogue: 0,0:02:12.78,0:02:16.43,Default,,0000,0000,0000,,Você já notou como esse \NURL começa com "http:"?
Dialogue: 0,0:02:16.43,0:02:19.46,Default,,0000,0000,0000,,Adivinhe o que significa esse "h"?\NHiper!
Dialogue: 0,0:02:19.46,0:02:22.36,Default,,0000,0000,0000,,HTML é todo sobre hiper.
Dialogue: 0,0:02:22.36,0:02:25.89,Default,,0000,0000,0000,,Esse URL especifica tudo o que o navegador\Nprecisa para achar a página:
Dialogue: 0,0:02:26.25,0:02:28.64,Default,,0000,0000,0000,,O protocolo usado para achá-la,
Dialogue: 0,0:02:28.64,0:02:30.57,Default,,0000,0000,0000,,o domínio a qual está inserida,
Dialogue: 0,0:02:30.57,0:02:34.22,Default,,0000,0000,0000,,e o caminho em que está \Nlocalizada dentro do servidor.
Dialogue: 0,0:02:34.66,0:02:39.16,Default,,0000,0000,0000,,Desde que especifique tudo, \Nchamamos isso de "URL absoluto".
Dialogue: 0,0:02:39.16,0:02:41.71,Default,,0000,0000,0000,,Em algumas páginas, \Nvocê poderá ver URLs
Dialogue: 0,0:02:41.71,0:02:44.26,Default,,0000,0000,0000,,que comecem com apenas barra e o endereço.
Dialogue: 0,0:02:44.26,0:02:46.55,Default,,0000,0000,0000,,Isso diz ao navegador para \Ncontinuar no domínio atual,
Dialogue: 0,0:02:46.55,0:02:48.90,Default,,0000,0000,0000,,e apenas procurar por um\Noutro caminho nesse domíno.
Dialogue: 0,0:02:48.90,0:02:51.12,Default,,0000,0000,0000,,Isto é chamado de "URL relativo".
Dialogue: 0,0:02:51.12,0:02:53.03,Default,,0000,0000,0000,,O utilizamos em todo o Khan Academy
Dialogue: 0,0:02:53.03,0:02:54.92,Default,,0000,0000,0000,,quando usamos link entre conteúdos.
Dialogue: 0,0:02:54.92,0:02:57.72,Default,,0000,0000,0000,,Você deve colocar URLs absolutos \Nnas páginas que fizer aqui
Dialogue: 0,0:02:57.72,0:02:59.80,Default,,0000,0000,0000,,para continuar no lado seguro.
Dialogue: 0,0:02:59.80,0:03:02.18,Default,,0000,0000,0000,,Dizemos ao navegador onde abrir
Dialogue: 0,0:03:02.18,0:03:05.20,Default,,0000,0000,0000,,a página na janela atual ou em uma\Nnova janela.
Dialogue: 0,0:03:05.20,0:03:08.17,Default,,0000,0000,0000,,Para dizer ao navegador abrir \Num link em uma nova janela,
Dialogue: 0,0:03:08.17,0:03:10.100,Default,,0000,0000,0000,,iremos adicionar um \Nnovo atributo, target ("alvo").
Dialogue: 0,0:03:10.100,0:03:14.78,Default,,0000,0000,0000,,'target="_blank"'
Dialogue: 0,0:03:15.96,0:03:19.48,Default,,0000,0000,0000,,Agora quero que você pause \Neste vídeo e tente clicar no link.
Dialogue: 0,0:03:19.48,0:03:21.48,Default,,0000,0000,0000,,Vá em frente, eu vou esperar.
Dialogue: 0,0:03:23.79,0:03:24.96,Default,,0000,0000,0000,,O que aconteceu?
Dialogue: 0,0:03:24.96,0:03:26.81,Default,,0000,0000,0000,,Você provavelmente viu um aviso \N
Dialogue: 0,0:03:26.81,0:03:29.15,Default,,0000,0000,0000,,sobre o link ser de uma\Npágina gerada pelo usuário
Dialogue: 0,0:03:29.15,0:03:31.12,Default,,0000,0000,0000,,E se você clicou "OK", o link abriu.
Dialogue: 0,0:03:31.12,0:03:34.85,Default,,0000,0000,0000,,Tratamos os links de uma maneira especial\Nnas páginas feitas aqui.
Dialogue: 0,0:03:34.85,0:03:37.30,Default,,0000,0000,0000,,Porque não queremos os \Nusuários pensando que links
Dialogue: 0,0:03:37.30,0:03:39.26,Default,,0000,0000,0000,,são endossado pela Khan Academy,
Dialogue: 0,0:03:39.26,0:03:41.78,Default,,0000,0000,0000,,e depois ir para um site assustador\Ne inesperado.
Dialogue: 0,0:03:41.78,0:03:44.09,Default,,0000,0000,0000,,Então, qualquer link aqui terá esse aviso,
Dialogue: 0,0:03:44.09,0:03:46.03,Default,,0000,0000,0000,,e todos irão abrir em uma nova janela.
Dialogue: 0,0:03:46.03,0:03:50.84,Default,,0000,0000,0000,,Isso quer dizer que eu posso \Ndeletar esse atributo marcado,
Dialogue: 0,0:03:50.84,0:03:53.68,Default,,0000,0000,0000,,desde que esteja sendo \Nconfigurado por dentro dele também.
Dialogue: 0,0:03:53.68,0:03:55.34,Default,,0000,0000,0000,,Ou, eu poderia deixá-lo,
Dialogue: 0,0:03:55.34,0:03:58.59,Default,,0000,0000,0000,,caso eu queira mover esse HTML, \Npara fora do Khan Academy, algum dia
Dialogue: 0,0:03:58.59,0:04:01.05,Default,,0000,0000,0000,,ter certeza que esse link abre\Nnuma nova janela
Dialogue: 0,0:04:01.05,0:04:03.65,Default,,0000,0000,0000,,Quando você deve usar essa tag?
Dialogue: 0,0:04:03.65,0:04:06.64,Default,,0000,0000,0000,,Se o link está indo para outra página\Nno mesmo domínio,
Dialogue: 0,0:04:06.64,0:04:08.25,Default,,0000,0000,0000,,ele deve abrir na mesma janela.
Dialogue: 0,0:04:08.25,0:04:11.63,Default,,0000,0000,0000,,E se está indo para outro domínio,\Ndeve abrir em uma nova janela.
Dialogue: 0,0:04:11.63,0:04:14.03,Default,,0000,0000,0000,,Chega desse papo,
Dialogue: 0,0:04:14.03,0:04:16.63,Default,,0000,0000,0000,,deixe-me lhe mostrar algo \Nmais claro sobre links.
Dialogue: 0,0:04:16.63,0:04:19.80,Default,,0000,0000,0000,,Podemos lincar mais do que apenas texto.
Dialogue: 0,0:04:19.80,0:04:22.54,Default,,0000,0000,0000,,Também podemos lincar imagens,\Nou texto e imagem!
Dialogue: 0,0:04:22.54,0:04:27.19,Default,,0000,0000,0000,,Aqui, temos essa imagem, que é uma foto\Ndo Tim Berners-Lee.
Dialogue: 0,0:04:27.19,0:04:30.11,Default,,0000,0000,0000,,Vou cortar ela...
Dialogue: 0,0:04:30.11,0:04:33.12,Default,,0000,0000,0000,,e colar dentro do link aqui.
Dialogue: 0,0:04:35.02,0:04:36.26,Default,,0000,0000,0000,,Legal.
Dialogue: 0,0:04:36.26,0:04:40.09,Default,,0000,0000,0000,,Agora, se eu passar o \Nmouse sobre a imagem,
Dialogue: 0,0:04:40.09,0:04:42.44,Default,,0000,0000,0000,,irei ver que agora o cursor \Nmudou para uma seta,
Dialogue: 0,0:04:42.44,0:04:44.81,Default,,0000,0000,0000,,e clicando nele, ele irá \Npara a página CERN.
Dialogue: 0,0:04:44.81,0:04:47.52,Default,,0000,0000,0000,,De fato, você poderia \Nlicar toda a sua página
Dialogue: 0,0:04:47.52,0:04:50.24,Default,,0000,0000,0000,,e tornar ela grande, azul, sublinhado.
Dialogue: 0,0:04:50.24,0:04:53.100,Default,,0000,0000,0000,,Mas por favor, não faça isso!\NLink com amor, meus amigos.
Dialogue: 0,0:04:53.100,0:04:56.76,Default,,0000,0000,0000,,Legendado por [Gabriel Mello Fernandes]\NRevisado por [Fernando dos Reis]