HTML & CSS para iniciantes

HTML & CSS para iniciantes (Parte 12): Definindo hiperlinks (2)

Todos os vídeos do tutorial HTML & CSS para iniciantes

Vocês podem inserir hiperlinks em endereços de e-mail. Antes de mostrar como isso funciona, algumas observações a respeito disso. Pessoalmente, não sou fã desses links de e-mail. Formulários são mais apropriados. Caso um cliente de e-mail não esteja instalado ou configurado para o usuário atual, os links de e-mail não funcionarão corretamente. No entanto, no final das contas, cabe a vocês decidir se desejam utilizar links de e-mail ou formulários. Informações detalhadas sobre os formulários serão apresentadas ao longo desta série.

Quando um link de e-mail é clicado, normalmente uma janela de e-mail se abre para o visitante.

HTML & CSS para iniciantes (Parte 12): Definir hiperlinks (2)

No entanto, isso não é garantido. Na verdade, o usuário precisa ter feito as configurações correspondentes. Novamente: a solução de link de e-mail não é ideal. Ainda assim, ocasionalmente pode ser útil. Aqui está a sintaxe:

<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Como podem ver, inicialmente se trata de um hiperlink clássico.

HTML & CSS para iniciantes (Parte 12): Definindo hiperlinks (2)

No entanto, o que importa aqui é o que é atribuído ao valor do atributo href. O destino sempre começa com mailto, seguido por dois pontos. Em seguida, é inserido o endereço de e-mail desejado.

Quanto aos links de e-mail, recomendamos que cuidem do texto do link. O ideal é sempre repetir o endereço de e-mail. Assim, os usuários que, ao clicar no hiperlink, não tiverem nenhuma ação ou não tiverem um cliente de e-mail abrindo, poderão copiar o endereço e enviar um e-mail mesmo assim.

Ao definir links de e-mail, há outras opções disponíveis além de simplesmente fornecer o endereço do destinatário. Observem que as coisas descritas aqui não são um padrão HTML, mas são amplamente suportadas pelos navegadores.

Primeiramente, podem especificar um destinatário Cc diretamente.

<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Devem acrescentar um ponto de interrogação depois do endereço do destinatário real. Em seguida, insiram cc e um sinal de igual, seguido pelo endereço para o qual uma cópia do e-mail deve ser enviada. Alternativamente a cc, também podem usar bcc. Nesse caso, o endereço fornecido será adicionado ao campo Bcc e o e-mail será enviado como uma cópia oculta para esse endereço.

Se desejarem especificar um assunto predefinido, também é possível.

<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



O assunto desejado deve ser inserido após subject. Para que isso funcione corretamente, evitem usar espaços no assunto e, se necessário, substituam por %20.

Se desejarem, também podem incluir o texto do e-mail ou parte dele. Para isso, usem o parâmetro body.

<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



HTML & CSS para iniciantes (Parte 12): Definindo hiperlinks (2)



Aqui valem as mesmas orientações que foram descritas em relação ao subject.

Oferecer arquivos para download

Se desejarem disponibilizar arquivos para download em seus sites, podem fazê-lo sem problemas. (Deixo de lado os aspectos legais neste momento). Isso pode ser facilmente realizado. Basta definir um hiperlink e indicar o arquivo correspondente como destino.

<a href="buch.zip"&gt>Os downloads do livro</a>



Neste caso, o destino do hiperlink é um arquivo ZIP. Ao clicar no hiperlink, o navegador normalmente oferecerá uma caixa de diálogo para download ou baixará o arquivo diretamente.

HTML & CSS para iniciantes (Parte 12): Definindo hyperlinks (2)



Por meio dela, será possível baixar o arquivo. No entanto, a maneira como os navegadores lidam com os arquivos indicados é decisão deles.

Os arquivos PDF normalmente são exibidos diretamente pelos navegadores quando o link correspondente é clicado. Na maioria dos casos, isso é perfeitamente aceitável. No entanto, pode haver momentos em que desejarão disponibilizar arquivos PDF para download. (Naturalmente, os usuários podem clicar com o botão direito do mouse no link e baixar o arquivo. No entanto, não é seguro assumir que todos os visitantes do site conheçam essa opção).

No HTML5, é possível marcar hiperlinks como links de download. Para isso, usem o atributo download.

<a href="ebook.pdf" download>Download</a>



Um link equipado com esse atributo - desde que o navegador suporte - fará o download do arquivo.

Normalmente, o arquivo é armazenado com o nome que ele tinha originalmente. Isso geralmente é aceitável. No entanto, talvez queiram atribuir um nome diferente ao arquivo baixado. Isso também é facilmente possível. Novamente, usem o atributo download. Como valor desse atributo, atribua o nome desejado.

<a href="ebook.pdf" download="dk.pdf">Baixar</a>



Quando o navegador suportar essa funcionalidade, ele usará o nome atribuído ao atributo download ao fazer o download.

HTML & CSS para iniciantes (Parte 12): Definindo hiperlinks (2)

Indicar relações lógicas

Um atributo que pode ser bastante interessante no contexto da definição de hyperlinks é o rel. Esse atributo permite indicar a que relação lógica o hyperlink está relacionado com o destino do link. Os navegadores poderiam, por exemplo, usar essa informação para exibir ícones correspondentes ao passar o mouse sobre os links. No entanto, atualmente eles ainda não fazem isso. Portanto, o atributo rel não tem efeitos visíveis.

<a href="zwei.htm" rel="next">próximo</a>



Os seguintes valores estão disponíveis para o atributo rel:

alternate – Link para uma versão alternativa do documento.

author – Link para o autor do documento.

bookmark – Link permanente do documento que pode ser usado como marcador.

help – Link para um arquivo de ajuda.

license – Link para informações de direitos autorais.

next – Link para o próximo documento.

nofollow – Permite indicar que os mecanismos de busca não devem seguir o link.

noreferrer – O navegador não envia o cabeçalho HTTP-Referrer.

prefetch – O documento deve ser carregado em cache.

prev – Link para o documento anterior.

search – Link para uma ferramenta de busca para o documento.

tag – Uma palavra-chave que descreve o documento.

Dessa forma, a relação entre destino do link e hyperlinks pode ser descrita de forma mais detalhada.