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]