-
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]