We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

 

Os hiperlinks são realmente importantes - são o que torna a Web uma web. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas do link.

Prerequisitos:

Familiaridade básica em HTML, tal como descrito em Começando com o HTML. Formatação de texto em HTML, conforme Fundamentos do texto em HTML.

Objetivo: Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.

Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web uma Web - eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos, também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e todo esse negócio). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador da Web vá para outro endereço da Web "URL").

Nota: Uma URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa viver na Web. Se o navegador da Web não sabe como exibir ou manipular o arquivo, ele irá perguntar se você quer abrir o arquivo (caso em que o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou baixe o arquivo (nesse caso, você pode tentar lidar com isso mais tarde).

 

A página inicial da BBC, por exemplo, contém uma grande quantidade de links para apontar, não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login / registro (ferramentas do usuário) e muito mais.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

Um link básico é criado envolvendo o texto (ou outro conteúdo, veja "Links de nível de bloco") que você quer transformar em um link dentro de um elemento  <a> , e dando-lhe um atributo "href", (também conhecido como Hypertext Reference , ou target) que conterá o endereço da Web para o qual você deseja que o link aponte para.

<p>Estou criando um link para
<a href="https://www.mozilla.org/en-US/">a página inicial da Mozilla</a>.
</p>

Isso nos dá o seguinte resultado:

Estou criando um link para a página inicial da Mozilla.

Adicionando informações de suporte com o atributo title

Outro título que você deseja adicionar aos seus links é o title; Isto destina-se a conter informações úteis suplementares sobre o link, como o tipo de informação que a página contém ou as coisas a serem conscientes. Por exemplo:

<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="O melhor lugar para encontrar mais informações sobre o Mozilla's
           missão e como contribuir "> a página inicial da Mozilla</a>.
</p>

Isso nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):

Estou criando um link para a página inicial da Mozilla.

Nota: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem de controles de teclado para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo colocando-o no texto normal.

Aprendizagem ativa: criando seu próprio link de exemplo

Tempo de aprendizagem ativo: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso modelo inicial seria interessante.)

  • Dentro do corpo do HTML, tente adicionar um ou mais parágrafos ou outros tipos de conteúdo que você já conhece.
  • Transforme alguns dos conteúdos em links.

  • Inclua atributos de título.

     

Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo elementos de nível de bloco. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <a></a>.

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla">
</a>

Nota: Você descobrirá muito mais sobre o uso de imagens na Web em futuro artigo.

 

Um guia rápido sobre URLs e caminhos

Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.

Um URL ou Uniform Resource Locator é simplesmente uma seqüência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em https://www.mozilla.org/en-US/.

Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no sistema de arquivos, o arquivo que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de criação de hiperlinks).

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

A raiz desta estrutura de diretório é chamada de  criação de hiperlinks. Ao trabalhar localmente com um site, você terá um diretório que o site inteiro vai para dentro. Dentro da raiz, temos um arquivo index.html e um contato.html. Em um site real, index.html seria nossa página inicial ou página de destino (uma página da Web que serve como ponto de entrada para um site ou uma seção específica de um site).

Existem também dois diretórios dentro da nossa raiz - pdfs e projetos. Cada um deles tem um único arquivo dentro deles - um PDF (projetos-brief.pdf) e um arquivo index.html, respectivamente. Observe como você pode muito feliz ter dois arquivos index.html em um único projeto enquanto estiverem em locais diferentes no sistema de arquivos. Muitos sites fazem. O segundo index.htmltalvez seja a principal página de destino para informações relacionadas ao projeto.

  • Mesmo diretório: se você quisesse incluir um hiperlink dentro do index.html apontando para contato.html, você precisaria apenas especificar o nome do arquivo ao qual deseja vincular, como está no mesmo diretório que o arquivo atual. Então, o URL que você usaria é contacts.html:

    <p>Deseja entrar em contato com um membro da equipe específica?
    Encontre detalhes sobre nossos serviços em nossa <a href="contato.html">página de contatos</a>.</p>
  • Movendo-se para baixo em subdiretórios: se você quisesse incluir um hiperlink dentro do index.html apontando para o projeto/index.html, você precisaria descer no diretório de projetos antes de indicar o arquivo que deseja vincular para. Isso é feito especificando o nome do diretório, depois uma barra inclinada e, em seguida, o nome do arquivo. então o URL que você usaria é o projeto/index.html:

    <p>Visite minha <a href="projects/index.html">pagina inicial do projeto</a>.</p>
  • Movendo-se de volta para os diretórios pai: se você quisesse incluir uma hiperlink dentro de projeto/index.html apontando para pdfs / projetos-brief.pdf, você precisaria subir um nível de diretório e voltar para o diretório pdf. "Subir um diretório" é indicado usando dois pontos - .. - então o URL que você usaria é  ../pdfs/project-brief.pdf

    <p>Um link para o meu <a href="../pdfs/project-brief.pdf"> breve de projeto</a>.</p>

Nota: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, e.../../../complex/path/to/my/file.html.

Documento fragmentos

É possível vincular a uma parte específica de um documento HTML (conhecido como um fragmento de documento) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então isso pareceria algo como o seguinte:

<h2 id="Mailing_address">Endereço de correspondência</h2>

Em seguida, para vincular a esse  id específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/anderline, por exemplo:

<p>Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing_address">endereço de correspondência</a>.</p>

Você pode até usar a referência de fragmento do documento por conta própria para vincular a outra parte do mesmo documento:

<p>O <a href="#Mailing_address">endereço postal da empresa</a> pode ser encontrado na parte inferior desta página.</p>

URLs absolutos versus relativos

Dois termos que você encontrará na Web são URL absoluta e URL relativa:

URL absoluto: aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página index.html for carregada para um diretório chamado projeto que se senta dentro da raiz de um servidor web, e o domínio do site é http://www.exemplo.com, a página estará disponível em http://www.exemplo.com/projeto/index.html (ou mesmo apenas http://www.exemplo.com/projeto/, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar se não está especificado no URL.)

projects called pdfs,

Um URL absoluto sempre aponta para o mesmo local, independentemente de onde ele é usado.

URL relativa: aponta para um local relativo ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em http://www.exemplo.com/projeto/index.html para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo - por exemplo, project-brief.pdf - nenhuma informação extra necessária. Se o PDF estava disponível em um subdiretório dentro de projects chamado pdfs,, o link relativo seria  pdfs/projeto-brief.pdf (o URL absoluto equivalente seria http://www.example.com/projects/pdfs/project-brief.pdf.

Um URL relativo aponta para lugares diferentes, dependendo de onde o arquivo é usado dentro está localizado - por exemplo, se mudarmos nosso arquivo index.html do diretório de projetos e para a raiz do site (o nível superior, não em quaisquer diretórios), o URL relativo pdfs / pdfs/project-brief.pdf agora aponta para http://www.example.com/pdfs/project-brief.pdf, e não http://www.example.com/projects/pdfs/project-brief.pdf.

Existem algumas práticas recomendadas a seguir ao escrever links. Vejamos estes agora.

Use palavras-chave claras

É fácil jogar links na sua página. Isto não é suficiente. Precisamos tornar nossos links acessíveis a todos os leitores, independentemente do contexto atual e quais ferramentas eles preferem. Por exemplo:

  • Os usuários do Screenreader gostam de brincar de link para link na página e ler links fora do contexto.
  • Os motores de busca usam o texto do link para indexar arquivos de destino, por isso é uma boa idéia incluir palavras-chave no texto do link para descrever efetivamente o que está sendo vinculado.
  • Os leitores visuais deslizam sobre a página em vez de ler cada palavra, e seus olhos serão atraídos para recursos de página que se destacam, como links. Encontrarão texto de link descritivo útil.

Vejamos um exemplo específico:

Bom texto do link: Baixe o Firefox

<p><a href="https://firefox.com/">
  Baixe o Firefox
</a></p>

Texto do link incorreto: clique aqui para baixar o Firefox

<p><a href="https://firefox.com/">
  clique aqui
</a>
to download Firefox</p>

Outras dicas:

  • Não repita o URL como parte do texto do link - Os URLs parecem feios e até são mais feios quando um leitor de tela os lê letra por letra.
  • Não diga "link" ou "links para" no texto do link - é apenas ruído. Os leitores de tela dizem às pessoas que existe um link. Os usuários visuais também sabem que existe um link, porque os links geralmente são de cor diferente e sublinhados (esta convenção geralmente não deve ser quebrada, pois os usuários estão tão acostumados a isso).
  • Mantenha seu rótulo de link o mais curto possível - links longos especialmente irritam os usuários de leitores de tela, que têm que ouvir o texto inteiro lido.
  • Minimize instâncias em que múltiplas cópias do mesmo texto estão ligadas a diferentes lugares. Isso pode causar problemas para os usuários do leitor de tela, que muitas vezes mostrará uma lista dos links fora do contexto - vários links todos rotulados como "clique aqui", "clique aqui", "clique aqui" seria confuso.

A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como links relativos. No entanto, você deve usar links relativos sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):

  • Para começar, é muito mais fácil verificar seu código - os URL relativos geralmente são muito mais curtos que os URLs absolutos, o que torna o código de leitura muito mais fácil.
  • Em segundo lugar, é mais eficiente usar URLs relativas sempre que possível. Quando você usa um URL absoluto, o navegador começa procurando a localização real do servidor no Servidor de Nomes de Domínio "DNS"; veja  Como a web funciona para obter mais informações), então ele vai para esse servidor e encontra o arquivo que está sendo solicitado. Com um URL relativo, por outro lado, o navegador apenas procura o arquivo que está sendo solicitado, no mesmo servidor. Então, se você usar URLs absolutos onde os URLs relativos fariam, você está constantemente fazendo o seu navegador funcionar extra, o que significa que ele irá executar de forma menos eficiente.

Vinculando-se a recursos que não sejam HTML - deixe indicadores claros

Ao vincular a um recurso que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou tiver outro efeito potencialmente inesperado (abre uma janela pop-up ou carrega um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:

  • Se você estiver em uma conexão de baixa largura de banda, clique em um link e, em seguida, um download múltiplo de megabytes começa inesperadamente.
  • Se você não tiver instalado o Flash Player, clique em um link e, de repente, seja levado para uma página que requer Flash.

Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:

<p><a href="http://www.example.com/large-report.pdf">
  Baixe o relatório de vendas (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Assista ao vídeo (o fluxo abre em separador separado, qualidade HD)
</a></p>

<p><a href="http://www.example.com/car-game">
  Jogue o jogo de carro (requer Flash)
</a></p>

Use o atributo de download ao vincular a um download

Quando você está ligando para um recurso que deve ser baixado em vez de aberto no navegador, você pode usar o atributo de download para fornecer um nome de arquivo de salvaguarda padrão. Aqui está um exemplo com um link de baixar para a versão do Windows 39 do Firefox:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Faça o download do Firefox 39 para Windows
</a>

Aprendizagem ativa: criando um menu de navegação

Para este exercício, gostaríamos que você vincule algumas páginas com um menu de navegação para criar um site de várias páginas. Esta é uma maneira comum em que um site é criado - a mesma estrutura de página é usada em cada página, incluindo o mesmo menu de navegação, então, quando os links são clicados, ele dá a impressão de que você está hospedado no mesmo lugar, e o conteúdo diferente é sendo educado.

Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de início do menu de navegação para uma lista completa de arquivos):

Você deve:

  1. Adicione uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de links, então esta é semanticamente ok.
  2. Transforme o nome de cada página em um link para essa página.
  3. Copie o menu de navegação para cada página.
  4. Em cada página, remova apenas o link para a mesma página - é confuso e inútil para uma página incluir um link para si e a falta de um link atende uma boa lembrança visual da página em que você está atualmente.

O exemplo final acabaria por parecer algo assim:

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

Note: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de navegação-menu-marcado para ver a resposta correta.

É possível criar links ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento "a" eo mailto: esquema de URL.

Na sua forma mais comum e comum, um mailto: link simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:

<a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a>

Isso resulta em um link que se parece com isto: Enviar e-mail para lugar nenhum.

Na verdade, o endereço de e-mail é mesmo opcional. Se você deixar de fora (ou seja, seu "href", "a" é simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo cliente de e-mail do usuário que ainda não possui um endereço de destino. Isso geralmente é útil como "Compartilhar" links que os usuários podem clicar para enviar um e-mail para um endereço escolhido.

Especificando detalhes

Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do mailto: que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.

Aqui está um exemplo que inclui um cc, bcc, assunto e corpo:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
 Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo:
</a>

Nota: Os valores de cada campo devem ser codificados por URL, isto é, com caracteres não impressos (caracteres invisíveis como guias, retornos de carro e quebras de página) e os espaços em percent-escaped. Observe também o uso do ponto de interrogação (?) Para separar o URL principal dos valores do campo, e e comercial (&) para separar cada campo no mailto: URL. Esta é a notação de consulta de URL padrão. Leia O método GET para entender o que a notação de consulta de URL é usada comonly.

Aqui estão alguns outros exemplos de URLs de mailto:

Resumo

Isso é para links, por enquanto, de qualquer maneira! Você voltará para os links mais tarde no curso quando você começar a olhar para designá-los. Em seguida, para HTML, retornaremos a semântica de texto e veremos algumas características mais avançadas / incomuns que você achará úteis. A formatação avançada de texto é a sua próxima parada.

Etiquetas do documento e colaboradores

Colaboradores desta página: Kardhyr, programando, fossalex, stefanocbl
Última atualização por: Kardhyr,