Links e Imagens

Curso de Fundamentos

Introdução
Os links são um dos principais recursos do HTML. Eles nos permitem vincular a outras
páginas HTML na web. Na verdade, é por isso que é chamado de web.
Nesta lição, aprenderemos como criar links e adicionar algum toque visual aos nossos
sites incorporando imagens.
Visão geral da lição
Esta seção contém uma visão geral dos tópicos que você aprenderá nesta lição.
Como criar links para páginas em outros sites na internet
Como criar links para outras páginas em seus próprios sites
A diferença entre ligações absolutas e relativas
Como exibir uma imagem em uma página da Web usando HTML
Preparação
Para obter alguma prática usando links e imagens ao longo desta lição, precisamos
de um projeto HTML para trabalhar.
1. Crie um novo diretório chamado . odin-links-and-images
2. Dentro desse diretório, crie um novo arquivo chamado . index.html
3. Abra o arquivo no VS Code e preencha o boilerplate HTML usual.
4. Finalmente, adicione o seguinte h1 ao corpo:

<h1>Homepage</h1>

Elementos de âncora
Para criar um link em HTML, usamos o elemento anchor. Um elemento âncora é
definido quebrando o texto ou outro elemento HTML que queremos que seja um link
com uma tag . <a>
Adicione o seguinte ao corpo da página .html índice que criamos e abra-a no
navegador:

<a>click me</a>

Você já deve ter notado que clicar neste link não faz nada. Isso ocorre porque uma
tag âncora por si só não saberá para onde queremos vincular. Temos que dizer a ele
um destino para ir. Fazemos isso usando um atributo HTML.
Um atributo HTML fornece informações adicionais a um elemento HTML e sempre vai
na tag de abertura do elemento. Um atributo é geralmente composto de duas partes:
um nome e um valor; no entanto, nem todos os atributos exigem um valor. No nosso
caso, precisamos adicionar um atributo href (hyperlink reference) à tag de âncora de
abertura. O valor do atributo href é o destino para o qual queremos que nosso link vá.
Adicione o seguinte atributo href ao elemento âncora que criamos anteriormente e
tente clicar nele novamente, não se esqueça de atualizar o navegador para que as
novas alterações possam ser aplicadas.

<a href="https://www.theodinproject.com/about">click me</a>

Por padrão, qualquer texto quebrado com uma marca âncora sem um atributo será
semelhante a texto sem formatação. Se o atributo estiver presente, o navegador dará
ao texto uma cor azul e o sublinhará para significar que é um link. href href
Vale a pena notar que você pode usar tags de âncora para vincular a qualquer tipo de
recurso na internet, não apenas outros documentos HTML. Você pode vincular a
vídeos, arquivos pdf, imagens e assim por diante, mas, na maioria das vezes, você
estará vinculando a outros documentos HTML.
Abrindo links em uma nova guia
O método mostrado acima abre links na mesma guia da página da Web que os
contém. Este é o comportamento padrão da maioria dos navegadores e pode ser
alterado com relativa facilidade. Tudo o que precisamos é de outro atributo: o
atributo. target
Enquanto especifica o link de destino, especifica onde o recurso vinculado será
aberto. Se ele não estiver presente, então, por padrão, ele assumirá o valor que abre
o link na guia atual. Para abrir o link em uma nova guia ou janela (depende das
configurações do navegador), você pode defini-lo da seguinte
maneira: href target _self _blank

<a href="https://www.theodinproject.com/about" target="_blank" rel="noope

Você já deve ter notado que nós entramos no atributo acima. Esse atributo é usado
para descrever a relação entre a página atual e o documento vinculado. rel
O valor impede que o link aberto tenha acesso à página da Web da qual foi aberto. O
valor impede que o link aberto saiba qual página da Web ou recurso tem um link (ou
'referência') para ele. Ele também inclui o comportamento e, portanto, pode ser usado
por si mesmo também. noopener noreferrer noopener
Por que precisamos desse comportamento adicional para abrir links em novas abas?
Razões de segurança. A prevenção de acesso causada por evita ataques de phishing
em que o link aberto pode alterar a página da Web original para outra diferente para
enganar os usuários. Isso é chamado de tabnabbing. A adição do valor pode ser feita
se você não quiser deixar o link aberto saber que sua página da Web está vinculada a
ele. noopener noreferrer
Observe que você pode ficar bem se esquecer de adicionar, uma vez que versões
mais recentes de navegadores fornecem essa segurança se apenas estiver presente.
No entanto, de acordo com as boas práticas de codificação e para errar pelo lado da
cautela, recomenda-se sempre emparelhar um com um . rel="noopener
noreferrer" target="_blank" target="_blank" rel="noopener noreferrer"

Links absolutos e relativos

Geralmente, existem dois tipos de links que criaremos:
1. Links para páginas em outros sites na internet
2. Links para páginas localizadas em nossos próprios sites
Links absolutos
Links para páginas em outros sites na internet são chamados de links absolutos. Um
link absoluto típico será composto das seguintes partes: . Um link absoluto sempre
conterá o protocolo e o domínio do destino. protocol://domain/path
Já vimos um elo absoluto em ação. O link que criamos para a página Sobre do Projeto
Odin anteriormente era um link absoluto, pois contém o protocolo e o domínio.
https://www.theodinproject.com/about

Links relativos
Links para outras páginas dentro do nosso próprio site são chamados de links
relativos. Os links relativos não incluem o nome de domínio, uma vez que é outra
página no mesmo site, presume-se que o nome de domínio será o mesmo que a
página em que criamos o link.
Relative links only include the file path to the other page, relative to the page you are
creating the link on. This is quite abstract, let’s see this in action using an example.
Within the directory, create another HTML file named and paste the following code
into it: odin-links-and-images about.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Odin Links and Images</title>
 </head>

<body>
<h1>About Page</h1>
</body>
</html>

De volta à página de índice, adicione o seguinte elemento âncora para criar um link
para a página sobre:

<body>
<h1>Homepage</h1>
<a href="https://www.theodinproject.com/about">click me</a>

<a href="about.html">About</a>
</body>

Abra o arquivo de índice em um navegador e clique no link sobre para se certificar de

que tudo está conectado corretamente. Clicando no link deve ir para a página sobre
que acabamos de criar.
Isso funciona porque o índice e a página sobre estão no mesmo diretório. Isso
significa que podemos simplesmente usar seu nome () como o valor href do
link. about.html
Mas geralmente queremos organizar nossos diretórios de sites um pouco melhor.
Normalmente, teríamos apenas o índice.html no diretório raiz e todos os outros
arquivos HTML em seu próprio diretório.
Crie um diretório nomeado dentro do diretório e mova o arquivo para esse novo
diretório. pages odin-links-and-images about.html
Atualize a página de índice no navegador e clique no link sobre. Agora será quebrado.
Isso ocorre porque o local do arquivo de paginação about foi alterado.
Para corrigir isso, só precisamos atualizar o valor href about link para incluir o
diretório, já que esse é o novo local do arquivo about em relação ao arquivo de
índice. pages/

<body>
<h1>Homepage</h1>
<a href="pages/about.html">About</a>
</body>

Atualize a página de índice no navegador e tente clicar no link sobre novamente,

agora ele deve estar de volta em ordem de funcionamento.
Em muitos casos, isso funcionará muito bem; no entanto, você ainda pode encontrar
problemas inesperados com essa abordagem. A pré-pendência antes do link evitará,
na maioria dos casos, tais problemas. Ao adicionar, você está especificando ao seu
código que ele deve começar a procurar o arquivo/diretório relativo ao
diretório. ./ ./ current

<body>
<h1>Homepage</h1>
<a href="./pages/about.html">About</a>
</body>

Uma metáfora
Ligações absolutas e relativas são um conceito complicado para construir um bom
modelo mental de, uma metáfora pode ajudar:
Pense no seu nome de domínio () como uma cidade, no diretório em que seu site está
localizado () como um museu e em cada página do seu site como uma sala no museu
( e ). Ligações relativas, como são as direções da sala atual (a sala de cinema do
museu) para outra sala (a loja do museu). Links absolutos, por outro lado, são
direções completas, incluindo o protocolo (), o nome de domínio () e o caminho desse
nome de domínio ():
. town.com /museum /museum/movie_room.html /museum/shops/coffee_shop.html ./shops/cof
fee_shop.html /museum/movie_room.html https town.com /museum/shops/coffee_shop.html
https://town.com/museum/shops/coffee_shop.html
Imagens
Os sites seriam bastante chatos se pudessem exibir apenas texto. Felizmente, o
HTML fornece uma grande variedade de elementos para exibir todos os tipos de
mídia diferentes. O mais utilizado deles é o elemento imagem.
Para exibir uma imagem em HTML usamos o elemento . Ao contrário dos outros
elementos que encontramos, o elemento é auto-fechamento. Elementos HTML vazios
e de fechamento automático não precisam de uma tag de fechamento. <img> <img>
Em vez de encapsular o conteúdo com uma tag de abertura e fechamento, ele
incorpora uma imagem na página usando um atributo src que informa ao navegador
onde o arquivo de imagem está localizado. O atributo src funciona como o atributo
href para tags de âncora. Ele pode incorporar uma imagem usando caminhos
absolutos e relativos.
Por exemplo, usando um caminho absoluto, podemos exibir uma imagem localizada
no site do Projeto Odin:
HTML Result

<img src="https://www.theodinproject.com/mstile-
310x310.png">

Resources

Para usar imagens que temos em nossos próprios sites, podemos usar um caminho
relativo.
1. Crie um novo diretório nomeado dentro do projeto. images odin-links-and-images
2. Em seguida, baixe esta imagem e mova-a para o diretório de imagens que
acabamos de criar.
3. Renomeie a imagem para . dog.jpg
Finalmente, adicione a imagem ao arquivo: index.html

<body>
<h1>Homepage</h1>
<a href="https://www.theodinproject.com/about">click me</a>

<a href="./pages/about.html">About</a>

<img src="./images/dog.jpg">
</body>

Salve o arquivo e abra-o em um navegador para ver Charles em toda a sua

glória. index.html

Diretórios pai
E se quisermos usar a imagem do cão na página sobre? Primeiro teríamos que subir
um nível do diretório pages para seu diretório pai para que pudéssemos então
acessar o diretório images.
Para ir para o diretório pai, precisamos usar dois pontos no caminho de arquivo
relativo como este: . Vamos ver isso em ação, dentro do corpo do arquivo, adicione a
seguinte imagem abaixo do título que adicionamos anteriormente: ../ about.html

<img src="../images/dog.jpg">

Para decompor isso:

1. Primeiro, vamos para o diretório pai do diretório de páginas que é . odin-links-
and-images

2. Então, a partir do diretório pai, podemos ir para o diretório. images

3. Por fim, podemos acessar o arquivo. dog.jpg
Usando a metáfora que usamos anteriormente, usar em um caminho de arquivo é
como sair da sala em que você está atualmente para o corredor principal para que
você possa ir para outra sala. ../

Atributo Alt
Além do atributo src, cada elemento de imagem também deve ter um atributo alt
(texto alternativo).
O atributo alt é usado para descrever uma imagem. Ele será usado no lugar da
imagem se não puder ser carregado. Ele também é usado com leitores de tela para
descrever o que a imagem é para usuários com deficiência visual.
É assim que o exemplo do logotipo do The Odin Project que usamos anteriormente
parece com um atributo alt incluído:
HTML Result

<img
src="https://www.theodinproject.com/mstile-
310x310.png" alt="The Odin Project Logo">

Resources

Como um pouco de prática, adicione um atributo alt à imagem do cão que

adicionamos ao projeto. odin-links-and-images
Designação
1. Assista ao vídeo HTML Links de Kevin Powell.
2. Assista ao vídeo HTML Images de Kevin Powell.
3. Assista ao vídeo da estrutura de arquivos de Kevin Powell.
 4. Leia sobre os quatro principais formatos de imagem que podem ser
usados na web.

Verificação de conhecimento
Esta seção contém perguntas para você verificar sua compreensão desta lição por
conta própria. Se você estiver tendo problemas para responder a uma pergunta,
clique nela e revise o material ao qual ela está vinculada.
Qual elemento é usado para criar um link?
O que é um atributo?
Qual atributo diz aos links para onde ir?
Que considerações de segurança devem ser tomadas se você deseja usar o
atributo target para abrir links em uma nova guia/janela?
Qual é a diferença entre um vínculo absoluto e relativo?
Qual elemento é usado para exibir uma imagem?
Quais são os dois atributos que as imagens sempre precisam ter?
Como acessar um diretório pai em um caminho de arquivo?
Quais são os quatro principais formatos de imagem que você pode usar para
imagens na web?
Recursos adicionais
Esta seção contém links úteis para conteúdo relacionado. Não é obrigatório, então
considere-o suplementar.
Interneting é tratamento difícil em links HTML e imagens
O que aconteceu no dia em que o Google decidiu que os links incluindo ( / ) eram
malware
Quando usar target="_blank" de Chris Coyier em CSS-Tricks
Melhorar o GitHub Comunicar um problema
 Ver Curso

Entre para acompanhar o progresso

Próxima Lição

Apoie-nos!
O Projeto Odin é financiado pela comunidade. Junte-se a nós para capacitar
alunos em todo o mundo apoiando o Projeto Odin!

Saiba Mais Doe agora

Educação em codificação de alta qualidade mantida por uma comunidade de código aberto.

Quem somos Guias

Sobre Guias da comunidade
Blogue Guias de instalação
Histórias de Sucesso
Legal
Apoio
Perguntas Freqüentes Termos
Contribuir Privacidade
Fale Conosco

© 2023 O Projeto Odin. Todos os direitos reservados.