HTML: Links

Vocês já aprenderam
muitas marcações em HTML.

Mas sabe o que
HTML realmente significa?

HTML significa:
"Linguagem de Marcação de Hipertexto".

É uma maneira de usar
marcações para marcar conteúdos.

Mas o que quer dizer hipertexto?

É uma frase que foi inventada

antes mesmo da existência da internet,

nos anos de 1960, para significar
texto que é conectado a outro texto

que o leitor pode
imediatamente, pular para.

Tim Berners-Lee inventou o HTML,

e outros ingredientes da
internet, como o HTTP,

uma forma de conectar
um texto a outros textos

localizados em qualquer lugar.

Como nós conectamos
páginas com outras páginas em

Linguagem de Marcação de Hipertexto?

Com um hiperlink, é claro!

O que normalmente
chamamos de link, atualmente.

Como fazemos um link em HTML?

Aqui é onde isso fica esquisito.

Você pode ter pensado que nós
usamos uma tag "link"...

Mas na verdade, isto é utilizado para
diferentes tipos de link em HTML.

Em vez disso, usamos a
tag "a", onde "a" remete a "âncora".

Isso é ancorar o link na
página em um certo local

e conectar essa âncora a
uma página diferente.

Para fazer um link, você sabe que
precisamos escrever a tag,

mas também precisamos
decidir o texto no link,

e depois o endereço que o link irá.

Vamos fazer esse link para uma página com
mais informações sobre a criação da web.

O texto do link irá dentro das
tags de início e de final.

Então vou colocar meu
cursor aqui e escrever,

"Leia mais sobre a história do HTML".

Então agora podemos ver que o
texto está se parecendo com um link.

Mas ainda não está indo a lugar algum.
Nós precisamos adicionar o endereço.

Não queremos que o endereço
fique aparecendo na página,

mas precisamos que o navegador
saiba disso.

Então colocamos isso
dentro de um atributo na tag.

Esse é o atributo href.

O que o "href" significa?

Vou lhe dar uma dica:
Você tem visto bastante esse "h".

Isso remete a "hiper"!
Hiper-referência.

Agora, vou colar dentro do endereço,
o qual também chamamos de URL.

Você já notou como esse
URL começa com "http:"?

Adivinhe o que significa esse "h"?
Hiper!

HTML é todo sobre hiper.

Esse URL especifica tudo o que o navegador
precisa para achar a página:

O protocolo usado para achá-la,

o domínio a qual está inserida,

e o caminho em que está
localizada dentro do servidor.

Desde que especifique tudo,
chamamos isso de "URL absoluto".

Em algumas páginas,
você poderá ver URLs

que comecem com apenas barra e o endereço.

Isso diz ao navegador para
continuar no domínio atual,

e apenas procurar por um
outro caminho nesse domíno.

Isto é chamado de "URL relativo".

O utilizamos em todo o Khan Academy

quando usamos link entre conteúdos.

Você deve colocar URLs absolutos
nas páginas que fizer aqui

para continuar no lado seguro.

Dizemos ao navegador onde abrir

a página na janela atual ou em uma
nova janela.

Para dizer ao navegador abrir
um link em uma nova janela,

iremos adicionar um
novo atributo, target ("alvo").

'target="_blank"'

Agora quero que você pause
este vídeo e tente clicar no link.

Vá em frente, eu vou esperar.

O que aconteceu?

Você provavelmente viu um aviso

sobre o link ser de uma
página gerada pelo usuário

E se você clicou "OK", o link abriu.

Tratamos os links de uma maneira especial
nas páginas feitas aqui.

Porque não queremos os
usuários pensando que links

são endossado pela Khan Academy,

e depois ir para um site assustador
e inesperado.

Então, qualquer link aqui terá esse aviso,

e todos irão abrir em uma nova janela.

Isso quer dizer que eu posso
deletar esse atributo marcado,

desde que esteja sendo
configurado por dentro dele também.

Ou, eu poderia deixá-lo,

caso eu queira mover esse HTML,
para fora do Khan Academy, algum dia

ter certeza que esse link abre
numa nova janela

Quando você deve usar essa tag?

Se o link está indo para outra página
no mesmo domínio,

ele deve abrir na mesma janela.

E se está indo para outro domínio,
deve abrir em uma nova janela.

Chega desse papo,

deixe-me lhe mostrar algo
mais claro sobre links.

Podemos lincar mais do que apenas texto.

Também podemos lincar imagens,
ou texto e imagem!

Aqui, temos essa imagem, que é uma foto
do Tim Berners-Lee.

Vou cortar ela...

e colar dentro do link aqui.

Legal.

Agora, se eu passar o
mouse sobre a imagem,

irei ver que agora o cursor
mudou para uma seta,

e clicando nele, ele irá
para a página CERN.

De fato, você poderia
licar toda a sua página

e tornar ela grande, azul, sublinhado.

Mas por favor, não faça isso!
Link com amor, meus amigos.

Legendado por [Gabriel Mello Fernandes]
Revisado por [Fernando dos Reis]